jQuery按类查找单击按钮的名称

jQuery find name of clicked button by class

本文关键字：按钮 单击 查找 jQuery      更新时间：2023-09-26

我有三个带按钮的表，它们有相同的名称类，比如这个

<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);
    });

试试这个

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

你从$('.howdy')按钮开始旅行，寻找最近的<table>，然后在里面寻找.info类，得到.text()

JSFIDDLE

试试这个。。

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

而不是

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

我建议：

$('.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>

但对于这样一项简单的任务来说，这有点过于复杂了。

参考文献：

  • CCD_ 11
  • eq()
  • find()
  • index()

要在按钮之前获取最接近的信息，您还可以向上移动并获取行的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>

相关文章：