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>

我需要当我点击其中一个按钮时我得到span的值例如，如果我点击第一个按钮我得到这个值一些文本1我使用了一些jquery代码，但结果他们给了我所有的价值< / p>

 $(".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)是一个上下文选择器，在上下文.howdy中查找this个元素。在这种情况下，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>

但对于这么简单的任务来说，这有点过于复杂。

参考文献：

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>

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

4 个答案: