Question

我有以下HTML（我省略了JQuery导入）：

<html>
  <body>
    <span class="element_to_read">Ciao</span> <br/>
    <span class="element_to_read">Hello</span>
  </body>
</html>

运行以下JavaScript：

console.log($(".element_to_read"));

哪个正确返回[span.element_to_read, span.element_to_read]。我尝试在列表中包含的元素上执行.text()，.html()，.value（通过访问`$（“。element_to_read”）[index]），但显然没有办法我可以获得所选元素的内容（文本值）（即Ciao和Hello）。

我该怎么做？感谢

编辑：与往常一样，这里的人无法从上到下阅读整个问题。 “我尝试对元素执行.text()，.html()，.value ...”意味着我知道如何遍历数组，但我不知道如何读取值（ Ciao，Hello）在所选元素中（两个span类）。

EDIT2：感谢所有的downvotes。显然，应该隐藏太容易的问题。

Answer 1

您需要迭代类似class选择器返回的结果，因为它会返回array个值。

然后，如果您只想获取文本值，请使用.text()，如下所示：

$(".element_to_read").each(function(){
    alert($(this).text());
});

DEMO

或者，如果您想使用嵌套标签获取文本值，请使用.html()，如下所示：

$(".element_to_read").each(function(){
    alert($(this).html());
});

DEMO

虽然在迭代过程中您可以创建array或其他string来根据您的要求读取组合值。

Answer 2

<强> WORKING FIDDLE

这可能如FIDDLE所示。

console.log($("span").text());

<强> UPDATED FIDDLE

$(document).ready(function(){
    var info=[];
    $("span").each(function(){
        info.push($(this).text());

    });
    console.log(info);
});

Answer 3

使用.text()

$(".element_to_read").each(function(){
  alert($(this).text());
});

获取innerText。

Answer 4

尝试以下内容。这应该可以正常工作。

＆＃13;

var text=[];
$('.element_to_read').each(function(){
    text.push($(this).text());
})
alert(text.join());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="element_to_read">Ciao</span> <br/>
<span class="element_to_read">Hello</span>

＆＃13;

使用JQuery选择器获取HTML标记的文本内容

4 个答案: