jquery parents 的选择器

Question

我有这个 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 我为 class 调用 on-click-event "ocond":

现在我想修改 class dropbtn 中的文本（大约有 100 个具有此名称）。所以我用这个 jquery 行试了一下：

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

我也试过：

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

但我没有成功。谁能指出我正确的选择器？提前致谢！

Answer 1

使用 $(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 的父级，并且

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

无效，因为 .dropbtn 不是 .dropdownedit 的同级。

如果你想 select 多个相关元素的父级，你应该只使用 .parents - 否则，最好使用 .closest（这将 select 一个祖先匹配传递的 selector）或 .parent（这将 select 只是直接父元素）。

jquery parents 的选择器

jquery selector of parents

jquery

children

parent

selector