Я не понимаю 'closest ()' до сих пор ... Пожалуйста, уточните

Question

Я борюсь с селектором jQuery closest () .

Я сделал jsfiddle из того, что я думаю должно работать ... но это явно не так. Почему нет?

HTML

<div class="button">button</div>
<div class="return_window"></div>

и невероятно сложный JS

$('.button').click(function(){

    $(this).closest('.return_window').html('hi');

});

Что я не понимаю в этом призрачном селекторе .closest ()? Эти дивы выглядят довольно близко ко мне. Я прочитал документацию, но я не знаю, что это такое. Документация Ресига или того, кто пишет, кажется, имеет другое измерение.

Любые указатели очень ценятся.

Answer 1

closest используется для того, чтобы взобраться на дерево DOM, а не смотреть сбоку на элементы родного брата.Проще говоря, он будет смотреть на родительский элемент, родительский элемент этого и т. Д., Пока не достигнет того, что ищет (или вершины дерева DOM).

Например:

<div class="grandparent">
    <div class="parent">
        <div id="child"></div>
        <div class="grandparent"></div>
    </div>
</div>

Следующий jQuery выберет внешний div, а не брат div:

$(".child").closest(".grandparent");

closest противоположен find, который смотрит вниз дерево DOM.Чтобы выбрать братьев и сестер, вы можете использовать метод siblings.

Answer 2

ближайших шагов от текущего выбранного элемента к корню, используя parentNode, и найти первый элемент, который соответствует данному селектору:

function closest(element, selector) {
    while (element != null) {
        if (matchesSelector(element, selector)) {
            return true;
        }
        element = element.parentNode;
    }
    return null;
}

Например, у нас есть HTML как:

<div id="d1" class="a">
  <div id="d2" class="b">
    <div id="d3" class="a">
      <span id="target"></span>
    </div>
  </div>
</div>

и нам нужен ближайший селектор, результат будет:

• ближайший (target, '.a') -> # d3
• ближайший (target,'div') -> # d3
• ближайший (цель, '.b') -> # d2

Answer 3

<div class="return_window">
    <div class="button">button</div>
</div>

В вашем примере выше будет HTML, который будет работать.Он находит ближайшего предка.

Вы можете использовать что-то вроде:

$(this).next('.return_window').html('hi')

С предоставленным вами HTML.

Answer 4

.closest() находит ближайшего предка , соответствующего вашему селектору.closest() начинается с самого себя, затем его родителя, или родителя его родителей, и т. Д.

что у вас есть братья и сестры.вам следует использовать .siblings(), если вы хотите найти элементы, которые имеют одного и того же родителя или следующие друг для друга.

Answer 5

В вашем случае используйте next (), а не closest (), так как closest () ищет дерево НАЧАЛО с текущим элементом:

$('.button').click(function(){

    $(this).next('.return_window').html('hi');

});

Answer 6

ближайший ищет DOM, если начальная точка не находится внутри той, которую вы ищете, она не найдет.

Я изменил ваш код, чтобы показать это:

http://jsfiddle.net/uRgEw/2/

может быть, вы ищете это:

$('.button').click(function(){

alert('hi');

$(this).closest('.container').find('.return_window').html('hi');

});

с HTML:

<div class="container">
    <div class="return_window">

    </div>
    <div class="button">button</div>
</div>

это позволит вам подниматься и опускаться с хорошей степенью гибкости.

как здесь сделано:

http://jsfiddle.net/uRgEw/5/

Answer 7

Ближайшие поиски РОДИТЕЛЕЙ элемента - не братьев и сестер рядом с элементами.

Он называется ближайший, потому что он находит ближайший родительский элемент определенного типа (селектор) для элемента. В .parents() достанутся все родители.

Я использую это все время.

Как:

<form>
  <div>
    <p>
      <input type="button" onClick="alert($(this).closest('form'));">
    </p>
  </div>
</form>

Из глубины души я могу быстро найти родительскую форму, игнорируя все промежуточные элементы.

Если вы хотите, чтобы ближайший брат сделал:

$(this).prevAll('.return_window').last();
$(this).nextAll('.return_window').first();

Это даст вам двух ближайших братьев и сестер сверху и снизу, и вам предстоит выяснить, какой из них ближе.