jQuery closest (), parent () и parent () влияет на несколько элементов на одном уровне DOM

Question

Я пытаюсь пройти DOM до ближайшего DIV. Разметка ниже ниже.

<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>

Когда я использую любое из следующего:

$('.anchor').closest('div').css('background-color', 'red');
$('.anchor').parents('div').css('background-color', 'red');
$('.anchor').parent().parent().css('background-color', 'red');

Влияет на все DIV следующим образом:

<div style="background-color: red">
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div style="background-color: red">
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div style="background-color: red">
     <span>
           <a class="anchor">Text</a>
     </span>
</div>

Если бы я щелкнул средний якорь, я бы хотел:

<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div style="background-color: red">
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>

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

Но при использовании parents() или parent() это не так ясно, поскольку другие DIV не являются родителями привязки клика. Но я также могу видеть, где это может просто снова соответствовать DIV на этом уровне в DOM. Хотя кажется, что parents() и parent() должны поддерживать больше контекстного контекста при сопоставлении.

Answer 1

Когда вы указываете $(".anchor"), он находит все объекты на вашей странице, которые соответствуют селектору .anchor, а затем один за другим делает .closest('div').css('background-color', 'red') для каждого из них. Если вы хотите охватить его только родительским div объекта, по которому щелкнули, вам нужно использовать объект click-on в качестве отправной точки для вашего .closest('div') вызова следующим образом:

$(this).closest('div').css('background-color', 'red');

Это будет влиять только на нажатый родительский div, начиная с объекта this.

Вы не показали код для обработчика кликов, но он может выглядеть следующим образом:

$(".anchor").click(function() {
    $(this).closest('div').css('background-color', 'red');
});

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

$(".anchor").click(function() {
    var master$ = $(this).closest('div')
    master$.siblings().css('background-color', 'white');
    master$.css('background-color', 'red');
});

Answer 2

Ваш начальный запрос узла $('.anchor') соответствует всем трем <a> элементам, поэтому все, что вы делаете с этого момента (будь то closest, parents или что-то еще), будет происходить один раз для каждого из этих совпадающих элементов.Если вы используете какой-либо из этих подходов в обработчике кликов, это не вызовет у вас проблем, поскольку он будет запускаться только для одного элемента.

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

Answer 3

Вы можете попробовать

$(this).closest('div').css('background-color', 'red');
$(this).parents('div').css('background-color', 'red');
$(this).parent().parent().css('background-color', 'red');

Надеюсь, это поможет ...:)

Answer 4

$('.anchor').closest('div') найдет все элементы .anchor, найдет ближайший элемент div и применит ко всем из них цвет фона.

Вы должны использовать this для ссылки на элемент, нажимаемый внутриобработчик щелчка.

$(this).closest('div')..

Попробуйте это.

$(".anchor").click(function() {
    $(this).closest('div').css('background-color', 'red');
});