jquery селектор родителей - PullRequest
       41

jquery селектор родителей

0 голосов
/ 08 декабря 2018

У меня есть такая html структура:

<div class="dropdownedit">
<div class="dropbtn">textxyz</div>
<div class="dropdown-content" style="display: none;">
<div href="#" class="ocond" id="text1">text1</div>
<div href="#" class="ocond" id="text2">text2</div>
<div href="#" class="ocond" id="text3">text3</div>
<div href="#" class="ocond" id="text4">text4</div>
</div></div>

в jquery Я вызываю событие-щелчок для класса "ocond":

Теперь я хочу изменить текст в классеdropbtn (их около 100)Так что я попробовал это с этой строкой jquery:

  $(this).parents('.dropbtn').text("conditionvalue");

Я также попробовал:

$(this).parents('.dropdownedit').siblings('.dropbtn').text("conditionvalue");

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

1 Ответ

0 голосов
/ 08 декабря 2018

Используйте $(this).parent() для перехода от .ocond к .dropdown-content, а затем вы можете использовать .siblings('.dropbtn') для перехода к брату .dropbtn:

$('.ocond').on('click', function() {
  $(this).parent().siblings('.dropbtn').text("conditionvalue");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdownedit">
  <div class="dropbtn">textxyz</div>
  <div class="dropdown-content">
    <div href="#" class="ocond" id="text1">text1</div>
    <div href="#" class="ocond" id="text2">text2</div>
    <div href="#" class="ocond" id="text3">text3</div>
    <div href="#" class="ocond" id="text4">text4</div>
  </div>
</div>

Ваш

$(this).parents('.dropbtn')

не работал, поскольку .dropbtn не является родителем .ocond s, а

$(this).parents('.dropdownedit').siblings('.dropbtn')

не сработало, потому что .dropbtn не является братом .dropdownedit.

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

...