我有这个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");
但是我没有成功。谁能指出我正确的选择器?预先感谢!
答案 0 :(得分:2)
使用$(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
的兄弟。
如果要选择所涉及元素的多个父级,则应该只使用.parents
-否则,最好使用.closest
(将选择祖先与传递的选择器匹配)或.parent
(将仅选择直接父元素)。