Question

我有这个代码。

HTML

<div class="has_dropdown">
    <button>Select branch</button>
    <ul class="dropdownmenu">
        <li><a href="#">Branch 1</li>
        <li><a href="#">Branch 2</li>
        <li><a href="#">Branch 3</li>
    </ul>
</div>

和这个jquery脚本

$('.dropdownmenu li a').click(function(){
    //go to the .has_dropdown which is the parent container and find button element within it and then replace the text of it with the current click anchor element text.
    $(this).parent('.has_dropdown').find('button').text($(this).text());
});

从脚本代码中可以看出，它将转到父元素.has_dropdown，然后在其中查找按钮元素，然后将按钮的元素文本替换为当前单击元素的文本（.dropdownmenu li a）但遗憾的是没有工作。有任何帮助提供线索，想法，建议和建议吗？

Answer 1

这是因为元素.has_dropdown不是<a>元素的直接父元素。您需要改为使用.closest() method。

Example Here

$('.dropdownmenu li a').click(function(){
    $(this).closest('.has_dropdown').find('button').text($(this).text());
});

.parent() method遍历直接父级，而.closest method遍历其祖先。

Answer 2

.parent()仅检索最接近的父元素，即html中的<li>。如果您只想使用parent()来访问该按钮，则可以执行以下操作：

$('.dropdownmenu li a').click(function(){
    $(this).parent().parent().prev().text($(this).text());
});

获取父元素并找到按钮元素并替换它的文本

2 个答案: