遍历 - 上到最近并找到答案

【问题标题】：Traverse - Go up to closest and find down遍历 - 上到最近并找到
【发布时间】：2017-09-20 23:23:37
【问题描述】：

我想获取dropdown-menu的选定值并将其应用到dropdown_text的span

<div class='dropdown'>
    <button class='btn btn-default dropdown-toggle col-sm-12' style='border-radius: 0px 4px 4px 0px; type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'>
        <span class='dropdown_text'>Choose a option</span>
        <span class='caret'></span>
    </button>
    <ul class='dropdown-menu' aria-labelledby='dropdownMenu1'>
        <li><a href='#'>Yes</a></li>
        <li><a href='#'>No</a></li>
        <li><a href='#'></a></li>
    </ul>
</div>

我试过这个没有成功：

    $('.dropdown-menu li > a').click(function(event){
        var otherInput = $(this).closest('button').find('span');
        console.log(otherInput);

        //$('.dropdown_text').text(this.innerHTML);  <<<<---- 
    });

带有箭头的那个有效，但是因为我有多个动态创建的<div class='dropdown'> 实例，我需要将该值应用到所有这些实例，而只是“当前”一个。

所以我想。从选定的a 遍历到closest 按钮和find 类为dropdown_text 的元素。

但我似乎在某个地方做错了什么。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap jquery-selectors

【解决方案1】：

您的button 不是li > a 的祖先 - 所以closest() 将不起作用 - 而是使用closest() 找到dropdown 然后下降找到button span。

见下面的代码：

$('.dropdown-menu li > a').click(function(event){
    $(this).closest('.dropdown').find('button span.dropdown_text').text(this.innerHTML);
});

请看下面的演示：

$('.dropdown-menu li > a').click(function(event){
    $(this).closest('.dropdown').find('button span.dropdown_text').text(this.innerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class='dropdown'>
  <button class='btn btn-default dropdown-toggle col-sm-12' style='border-radius: 0px 4px 4px 0px;' type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'>
    <span class='dropdown_text'>Choose a option</span>
    <span class='caret'></span>
  </button>
  <ul class='dropdown-menu' aria-labelledby='dropdownMenu1'>
    <li><a href='#'>Yes</a>
    </li>
    <li><a href='#'>No</a>
    </li>
    <li>
      <a href='#'></a>
    </li>
  </ul>
</div>

【讨论】：

好的，这很好，除了它也将答案应用于<span class='caret'></span>。谢谢，这是一个很好的推动。

【解决方案2】：

我的建议是：

获取第一个带有类下拉列表的父 div：closest('div.dropdown')
使用 dropdown_text 类查找 span：find('span.dropdown_text')

sn-p：

$('.dropdown-menu li > a').on('click', function(event){
  var otherInput = $(this).closest('div.dropdown').find('span.dropdown_text');
  console.log(otherInput.text());
  otherInput.text(this.textContent);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class='dropdown'>
    <button class='btn btn-default dropdown-toggle col-sm-12' style='border-radius: 0px 4px 4px 0px;' type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'>
    <span class='dropdown_text'>Choose a option</span>
    <span class='caret'></span>
    </button>
    <ul class='dropdown-menu' aria-labelledby='dropdownMenu1'>
        <li><a href='#'>Yes</a></li>
        <li><a href='#'>No</a></li>
        <li><a href='#'></a></li>
    </ul>
</div>

【讨论】：

感谢.on('click'动态项目的提醒。
@morne 这不仅适用于动态，尤其是因为使用 jQuery 3.x.... 最好使用 on 而不是 click。这是为了避免混淆，例如加载窗口和 ajax 加载之间的混淆。谢谢

【解决方案3】：

用下面的代码替换你的 jQuery 代码：

<script>
$(document).on('click','.dropdown-menu li > a',function(){
    var value=$(this).html();
    $(this).parent().parent().parent().find('.dropdown_text').html(value);

});

</script>

【讨论】：

【解决方案4】：

$.closest() 向上遍历 DOM 树。它与兄弟姐妹不匹配。在你的点击中，它会去，li -> ul.dropdown-menu -> div.dropdown -> 不管它的父级是什么。

它永远找不到按钮。

var otherInput = $(this).closest('.dropdown').find('span');

将返回两个跨度

【讨论】：