logo标签列表

如何使用jQuery获取<span>标签的内容？

javascriptjqueryhtml
164

如何获取 span 元素的内容 'This is my name'？

<div id='item1'>
<span>This is my name</span>
</div>
12个回答
324

我认为这应该是一个简单的例子：

$('#item1 span').text();
或者
$('#item1 span').html();
2
我在哪里可以找到那些jQuery函数？ - Felipe Barreiros
27
当展示这两个函数时，我认为很重要的一点是不要让新手程序员产生混淆，暗示它们执行相同的操作，而实际上并非如此（尽管在这个例子中看起来是这样）。需要注意的是，.text() 函数会对其找到的任何字符进行 HTML 编码，而 .html() 函数则不会对字符进行编码。 - VoidKing
这个可以通过使用相同类别的多个span来实现吗？ - Matthew Woodard
我在尝试解决tspan在IE中的问题时偶然发现了这个。我发现你需要使用.text()而不是.html()来处理tspan。不确定为什么，也许并非对每个人都适用，但当我使用.text()时，它在IE中修复了该问题。 - Kalel Wade
@MatthewWoodard $('.class').each(function() { $(this).html() });; 因为$('.class').html()将返回第一个元素的.html()值。 - tomsihap
还应该注意，如果这不是直接在一个 span 上，并且您调用 text()，它将遍历所有子节点并连接结果。 - Scott Anderson
15
$("#item1 span").text();
7
你可以直接在html中的span标签中使用id。
<span id="span_id">Client</span>

那么你的jQuery代码将会是：
$("#span_id").text();

有人帮我检查错误并发现他使用了val()而不是text()，在span中无法使用val()函数。

$("#span_id").val();

将返回null。

7
假设你想要将其读作 id="item1"，你需要：
$('#item1 span').text()
5

由于您没有提供'item'值的属性，我假设使用了一个类：

<div class='item1'>
  <span>This is my name</span>
</div>

alert($(".item span").text());

确保在DOM加载完成后再使用代码，在jQuery中，您可以使用ready()函数来实现：

<html>
 <head>
  <title>jQuery test</title>
  <!-- script that inserts jquery goes here -->
  <script type='text/javascript'>
    $(document).ready(function() { alert($(".item span").text()); });
  </script>
</head>
<body>
 <div class='item1'>
   <span>This is my name</span>
 </div>
</body>

1
你改变了问题！你的答案对于你的问题是正确的，他指定的是ID而不是类名。 - Lewis
好的，如果你看到他名字下面的第一条评论，你会注意到他根本没有写属性，只是<div 'item1'>，我猜错了显然。 - Francisco Aquino
5

$('#item1').text(); 或 $('#item1').html(); 对于 id="item1" 的元素可以正常工作。

3
在JavaScript中，你会使用 document.getElementById('item1').innerText 吗？
1
     $('span id').text(); worked with me
1

$('#id span').text() 就是答案！

0

关于 .text() 和 .html() 之间的区别，以下是非常重要的附加信息：

如果您的选择器选择了多个项目，例如您有两个类似于以下内容的 span 元素

<span class="foo">bar1</span> <span class="foo">bar2</span> ,

那么

$('.foo').text(); 将连接这两个文本并将其返回；而

$('.foo').html(); 只会返回其中一个。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接