javascript - 遍历 - 上到最近并找到下

Question

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

<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 的元素.

但我好像哪里做错了什么。

Answer 1

您的按钮 不是li > a 的祖先 - 因此closest() 将不起作用- 而是使用 closest() 找到 dropdown，然后 descent 找到 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>