jQuery .text（）在同一个类中的多个元素上

Question

我正在尝试在页面上的多个（未知数量）元素上使用.text（）。

考虑：

<div class="myClass">element1</div>
<div class="myClass">element2</div>
<div class="myClass">element3</div>

和

$(document).ready(function(){
    $( ".myClass" ).click(function() {
        var text = $('.myClass').text()
        alert(text)
    });
});

问题是，.text()会同时返回所有元素（在此示例中为"element1element2element3"）。

我只需要返回点击的类中的文字，例如：点击element2，它会将"element2"作为.text()返回。

Answer 1

Context是关键。

事件回调在trigger元素的上下文中运行。换句话说，Id指向该元素。因此，不要像现在那样重复选择器（在性能方面不必要地浪费），而是引用this：

this

Answer 2

使用$(this)：

$(document).ready(function(){
    $(".myClass").click(function() {
        var text = $(this).text();
        console.log(text);
    });
});

内部事件回调this指的是当前（即点击）元素。

另外，console.log() is better for debugging than alert()。

Answer 3

虽然已经发布了答案，但我会发布我的答案：

请参阅，目前您已在类选择器上绑定了一个事件，并且在Web浏览器中，类选择器返回一个集合。因此，这意味着列表中将有多个元素。

此外还有一些标签名称选择器，它们也会返回一个集合。

虽然在另一个选择器ID选择器上只返回一个元素，因为按照标准或更好地说根据规则ID应该对每个元素都是唯一的。这就是为什么它总是从DOM返回一个元素。

这就是你得到不同行为的原因。要解决此问题，您需要了解选择器的上下文。获取有关this的信息是一个很好的主题。

因此，this表示DOM节点，在您的情况下，您需要jQuery对象。所以，用jQuery包装器$()包装它，得到一个带$(this)的jQuery对象。

$( ".myClass" ).click(function() {
    var text = $(this).text(); // the elem in context
    console.log(text);
});

Answer 4

您可以使用事件对象找出点击的元素，然后可以显示它的文字

$(document).ready(function(){
    $( ".myClass" ).click(function(event) {
        var text = $(event.target).text()
        alert(text)
    });
});

JSFIDDLE