jQuery .closest（）没有选择最近的元素

Question

由于某种原因，我在选择另一个元素上方的元素时遇到了麻烦。我想选择位于.discount-dropdown班级之外的最近的.discount-type班级。我做错了什么？

HTML（其中的多个）：

<div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle discount-dropdown" data-toggle="dropdown" aria-expanded="false">$ <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right adjustment-dropdown" role="menu">
        <li><a class="discount-type">$</a></li>
        <li><a class="discount-type">%</a></li>
    </ul>
</div>

jQuery的：

$('.discount-type').on('click', function(event){
    $sign = $(this).html().substr(0,1);
    $parentElement = $(this).closest('.discount-dropdown').html(); //this isn't working
    $newHtml = $sign + $parentElement.substr(1);
    alert($newHtml);
});

Answer 1

因为按钮不是li

的父级

$('.discount-type').on('click', function(event){
    $sign = $(this).html().substr(0,1);
    $parentElement = $(this).closest('ul').prev('.discount-dropdown').html(); //this isn't working
    $newHtml = $sign + $parentElement.substr(1);
    alert($newHtml);
});

我建议您更新货币的方式有一些变化，例如

＆＃13;

＆＃13;

$('.discount-type').on('click', function(event) {
  var sign = $(this).html().substr(0, 1);
  $(this).closest('ul').prev('.discount-dropdown').find('.currency').text(sign)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-group-btn">
  <button type="button" class="btn btn-default dropdown-toggle discount-dropdown" data-toggle="dropdown" aria-expanded="false"><span class="currency">$</span> <span class="caret"></span></button>
  <ul class="dropdown-menu dropdown-menu-right adjustment-dropdown" role="menu">
    <li><a class="discount-type">$</a></li>
    <li><a class="discount-type">%</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

最近的函数将搜索具有给定条件的最近父级，您的按钮不是元素的任何父级。因此，使用最近可以用于查找元素的父级 - 折扣类型和按钮。拥有父母的处理程序，你可以找到你的按钮。

    $buttonElement = $(this).closest('.input-group-btn').find('.discount-dropdown').html();

• input-group-btn - 是两个元素的父级
• discount-dropdown 是 input-group-btn 的子元素

Answer 3

试试这个

$('.discount-type').on('click', function(event){
    $sign = $(this).html().substr(0,1);
    $parentElement = $(this).parent().parent().parent().find('.discount-dropdown').html(); //this is working fine
    $newHtml = $sign + $parentElement.substr(1);
    alert($newHtml);
});

Working Demo

Answer 4

使用closest('ul')代替closest('.discount-dropdown')。 您还可以使用parentsUntil + parent

$(this).parentsUntil('.discount-dropdown').parent().html();