jQuery用类选择上一个元素

jQuery select previous element with a class

本文关键字：上一个 元素 选择 jQuery      更新时间：2023-09-26

我有以下内容：

<div class="input-group-btn">
     <button type="button" class="btn btn-default dropdown-toggle ranking-toggle" data-toggle="dropdown"><span class="chosen-rank">Ranking</span> <span class="caret"></span></button>
    <ul class="dropdown-menu ranking-dropdown pull-right">
         <li><a href="javascript:void(0)">#1</a></li>
         <li><a href="javascript:void(0)">#2</a></li>
         <li><a href="javascript:void(0)">#3</a></li>
    </ul>

当我点击下拉列表中的任何锚时，我想将所选排名范围中的"排名"文本替换为所选#。

我认为以下可能有效，但它不针对span.chosen-rank:

$('.ranking-dropdown li a').click(function() { 
   $(this).closest('span.chosen-rank').text(this.text);
});

可能需要使用prev((和/或parent((方法的一些组合，不确定到目前为止似乎什么都不起作用。我之所以不直接针对跨度，是因为我在

页面上有多个这样的下拉菜单

您需要在DOM中向上一点(使用.closest()(，然后再向下(使用.find()(：

$('.ranking-dropdown li a').click(function () {
    $(this).closest('.input-group-btn').find('span.chosen-rank').text(this.text);
});

jsFiddle示例

$(this).parents(".input-group-btn").find(".chosen-rank").text(this.text);

应该工作：http://api.jquery.com/parents/&http://api.jquery.com/find/

编辑：查看我的Fiddle

相关文章：