jQuery使用类选择上一个元素

Question

我有以下内容：

<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（）方法的某种组合，不确定到目前为止似乎没有任何效果。 我之所以不直接定位范围是因为页面上有多个这样的下拉列表

Answer 1

您需要在DOM中向上移动（使用.closest() ），然后向下移动（使用.find() ）：

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

jsFiddle示例

Answer 2

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

应该可以使用： http : //api.jquery.com/parents/＆http : //api.jquery.com/find/

编辑： 看我的小提琴