jQuery按類查找單擊按鈕的名稱

Question

我有3個帶有按鈕的表，它們具有相同的名稱類別

<table>
<tr><td><span class="info">Some Text 1</span></td> </tr>
<tr><td><button class="howdy">print out</button></td></tr>
</table>

<table>
<tr><td><span class="info">Some Text 2</span></td></tr>
<tr><td><button class="howdy">print out</button></td></tr>
</table>

<table>
<tr><td><span class="info">Some Text 3</span></td></tr>
<tr><td><button class="howdy">print out</button></td></tr>
</table>

我需要在單擊其中一個按鈕時獲得跨度的值，例如，如果我在第一個按鈕中單擊，則會得到此值。一些文本1我使用了一些jquery代碼，但結果它們給了我所有價值

 $(".howdy",this).click(function(e) {
        cart=$(".info").text();
        console.log(cart);
    });

Answer 1

嘗試這個

$('.howdy').on('click', function(){
    console.log($(this).closest('table').find('.info').text());
});

您從$('.howdy')按鈕開始游歷並尋找最接近的<table>然后在其中尋找.info類並獲取.text()

的jsfiddle

Answer 2

嘗試這個..

cart = $(this).parents("table").find('.info').text();

代替

cart=$(".info").text();

Answer 3

我建議：

 $('.howdy').click(function(){ var cart = $(this).closest('table').find('.info').text(); console.log(cart); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr><td><span class="info">Some Text 1</span></td> </tr> <tr><td><button class="howdy">print out</button></td></tr> </table> <table> <tr><td><span class="info">Some Text 2</span></td></tr> <tr><td><button class="howdy">print out</button></td></tr> </table> <table> <tr><td><span class="info">Some Text 3</span></td></tr> <tr><td><button class="howdy">print out</button></td></tr> </table> 

您原始的jQuery的問題是：

$(".howdy",this).click(function(e) {
    // you were selecting without any context, so retrieving
    // all the .info elements, but the getter use of text()
    // retrieves from only the first element of the collection:
    cart=$(".info").text();
    console.log(cart);
});

另外： $('.howdy', this)是上下文選擇器，在上下文this尋找.howdy元素。 在這種情況下， this （可能）中提到的全局對象的window ，它在這里工作 （或應該取決於正是this就是），但可能會造成問題。

順便說一句，上述的替代方法是：

 $('.howdy').click(function(){ var cart = $('.info').eq($(this).index('.howdy')).text(); console.log(cart); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr><td><span class="info">Some Text 1</span></td> </tr> <tr><td><button class="howdy">print out</button></td></tr> </table> <table> <tr><td><span class="info">Some Text 2</span></td></tr> <tr><td><button class="howdy">print out</button></td></tr> </table> <table> <tr><td><span class="info">Some Text 3</span></td></tr> <tr><td><button class="howdy">print out</button></td></tr> </table> 

但這對於這樣一個簡單的任務來說有些復雜。

參考文獻：

• closest() 。
• eq() 。
• find() 。
• index() 。

Answer 4

要在按鈕之前獲取最近的信息，您還可以向上移動並獲取該行的prev（）同級-這樣，您就可以在同一張表中包含這些行

  $(".howdy").click(function(e) { var cart=$(this).closest("tr").prev().find(".info").text(); window.console&&console.log(cart); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr><td><span class="info">Some Text 1</span></td> </tr> <tr><td><button class="howdy">print out</button></td></tr> </table> <table> <tr><td><span class="info">Some Text 2</span></td></tr> <tr><td><button class="howdy">print out</button></td></tr> </table> <table> <tr><td><span class="info">Some Text 3</span></td></tr> <tr><td><button class="howdy">print out</button></td></tr> </table>