jQuery的發現以前的類和返回值

Question

我試圖讓最近dropdown-header點擊列表項

<ul class="dropdown-menu"> 
    <li class="dropdown-header">Word 1</li> 
    <li><a href="#">Click me 1</a></li> 
    <li><a href="#">Click me 1</a></li> 
    <li><a href="#">Click me 1</a></li> 
    <li class="dropdown-header">Word 2</li> 
    <li><a href="#">Click me 2</a></li> 
    <li><a href="#">Click me 2</a></li> 
    <li class="dropdown-header">Word 3</li> 
    <li><a href="#">Click me 3</a></li> 
</ul> 

時，這是不工作，可能有人請解釋。謝謝

$('.dropdown-menu').on('click', 'a', function(e) { 
      $(this).parent().parent().find('.dropdown-header').html(); //would return Word # 
      e.preventDefault(); 
     }); 

Answer 1

您需要從錨升了一級到列表中的項目，然後在列表與下拉頭類的列表項。另外，。 val()適用於表單元素，而不是列表項，因此您需要.html()或.text()。嘗試：

var val = $(this).parent().prevAll('.dropdown-header').html(); 

$('.dropdown-menu').on('click', 'a', function(e) { 
 
    var val = $(this).parent().prevAll('.dropdown-header').html(); //would return Word # 
 
    console.log(val) 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dropdown-menu"> 
 
    <li class="dropdown-header">Word 1</li> 
 
    <li><a href="#">Click me 1</a></li> 
 
    <li><a href="#">Click me 1</a></li> 
 
    <li><a href="#">Click me 1</a></li> 
 
    <li class="dropdown-header">Word 2</li> 
 
    <li><a href="#">Click me 2</a></li> 
 
    <li><a href="#">Click me 2</a></li> 
 
    <li class="dropdown-header">Word 3</li> 
 
    <li><a href="#">Click me 3</a></li> 
 
</ul>

Answer 2

單獨closest()不會爲你在這種情況下，它的目的是尋找父母，沒有父母兄弟姐妹的工作。

修復此問題您可以使用closest()獲取父母li，然後使用prevAll()和:first獲取要查找的元素。試試這個：

$('.dropdown-menu').on('click', 'a', function(e) { 
 
    e.preventDefault(); 
 
    var val = $(this).closest('li').prevAll('.dropdown-header:first').text(); 
 
    console.log(val); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dropdown-menu"> 
 
    <li class="dropdown-header">Word 1</li> 
 
    <li><a href="#">Click me 1</a></li> 
 
    <li><a href="#">Click me 1</a></li> 
 
    <li><a href="#">Click me 1</a></li> 
 
    <li class="dropdown-header">Word 2</li> 
 
    <li><a href="#">Click me 2</a></li> 
 
    <li><a href="#">Click me 2</a></li> 
 
    <li class="dropdown-header">Word 3</li> 
 
    <li><a href="#">Click me 3</a></li> 
 
</ul>