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>