如何使用jquery定位ul中的li元素

Question

我想用jquery在ul中獲取li項目的文本值：

     <ul id=list"><li>Milk<button class="check">Check</button></li>
    <li>Bread<button class="check">Check</button></li>
    <li>Eggs<button class="check">Check</button></li></ul>

我試過了：

 $('.check').parent().val();

但這不起作用，並返回0作為值。 基本上，我想在單擊復選按鈕時確定li item的值。

Answer 1

您的<li>項目實際上沒有jquery / javascript理解的值。 相反，他們只是在列表項中包含文本。 此外，如果只是嘗試在<li>抓取.text() ，您還將從按鈕本身獲取文本，因為它位於列表項中。

您可以采取幾種不同的方法。 將文本包裹在<span> ，然后在單擊按鈕后使用jquery查找文本。 或者，您可以簡單地為列表項本身分配一個值作為數據屬性，然后使用jquery抓取該值。

<li data-val="eggs">Eggs
    <button class="check-val">Check</button>
</li>

$(".check-val").on("click", function () {
    alert($(this).parent().attr('data-val'));
});

看到這個小提琴，它展示了不同的方法： http : //jsfiddle.net/mark47/uyzmbmwt/

Answer 2

單擊按鈕后，您會得到以下標簽：

$(".check").on("click",function(){
        alert ($(this).parent().children("label").text());
    });

Answer 3

當您說價值時，也許您的意思是李里面的文字？ 如果是這樣，您可以擺脫按鈕，將其類分配給li本身，然后單擊文本：

$('.check').click(function () {
    alert($(this).html();
});

您可以將其樣式設置為看起來像按鈕。 或者，如果您想保留該按鈕，則可以為其指定一個ID並獲取它：

$('.check').click(function () {
    alert($(this).attr('id');
});

Answer 4

嘗試這個：

$('.check').click(function(){ var value = $(this).parent().first().children().html();})

Answer 5

使用text()代替val() ，盡管它會包含按鈕的值，但是我們可以使用split()和join()刪除它。 只是為了獲得單擊的父級內部的值。

 $('.check').on("click", function () { var val = $(this).parent().text().split("Check").join(""); alert(val); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="list"> <li>Milk <button class="check">Check</button> </li> <li>Bread <button class="check">Check</button> </li> <li>Eggs <button class="check">Check</button> </li> </ul>