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 example

Answer 2

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

应该有效：http://api.jquery.com/parents/＆amp; http://api.jquery.com/find/

编辑：See my Fiddle

jQuery用类选择前一个元素

2 个答案: