Question

我正在尝试获取所有span标签的内容，这些标签是div＃parent的子项，我无法做到，我只是得到第一个。请有人帮助我！

＆＃13;

$( document ).ready(function() {
    var allspans=$("#parent").find("span").html();
    console.log( allspans );
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>jQuery</title>
</head>
<body>
  <div id="parent">
    <span>Element_1</span>
    <span>Element_2</span>
    <span>Element_3</span>
    <span>Element_4</span>
    <span>Element_5</span>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  </div>
</body>
</html>

＆＃13;

谢谢！最诚挚的问候！

Answer 1

您可以使用span迭代.each，然后像这样访问他们的innerHTML个人。通过.each，您可以将内部HTML内容组合在一个数组或字符串中。

或者，您可以通过span获取所有$("#parent").text()的内部文字。

＆＃13;

$(document).ready(function() {
  $("#parent").find("span").each(function() {
    console.log($(this).html());
  });
  
  console.log($("#parent").text());
});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>jQuery</title>
</head>

<body>
  <div id="parent">
    <span>Element_1</span>
    <span>Element_2</span>
    <span>Element_3</span>
    <span>Element_4</span>
    <span>Element_5</span>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  </div>
</body>

</html>

＆＃13;

Answer 2

JQuery 很慢而且没有必要。

spans = document.getElementById("parent").getElementsByTagName("span");

返回父级中所有跨度的数组。

此时任务已完成，正如我所理解的：spans[span_number].innerHTML 就是您想要的。

然后以任何方式（foreach 或任何您喜欢的方式）解析跨度数组：

for(var i = 0, len = spans.length; i < len; i++ )
{
    console.log(spans[i].innerHTML);
}

以任何方式（在可能的情况下）避免使用 JQuery 以使您的代码更加独立、快速、资源占用更少且健壮。节省流量。

Answer 3

你需要使用一些循环，直到$（＆＃34;＃parent＆＃34;）。find（＆＃34; span＆＃34;）。length，默认情况下jquery html函数将返回第一个匹配的元素内容：

var html = '';
var allspans = $("#parent").find("span");
for(var i=0;i<allspans.length;i++){
  html += allspans[i].innerHTML;
}

Answer 4

$( document ).ready(function() {
    var allspans=$("#parent").find("span");
    var allSpanHtml = '';
    allspans.each(function() {
     allSpanHtml += $(this).html();
    });
    console.log( allSpanHtml );
});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="parent">
    <span>Element_1</span>
    <span>Element_2</span>
    <span>Element_3</span>
    <span>Element_4</span>
    <span>Element_5</span>
</div>

您可以使用.each()遍历元素数组，然后使用.html()从单个元素中获取文本。

Answer 5

试试这个

var arraySpan = [];
$('span').each(function() {
   arraySpan.push(this.innerHTML);
});

Answer 6

你需要循环遍历选择器和控制台匹配的每个span，记录每个html值或将它们连接成一个变量或将它们推送到一个数组变量;取决于哪种效果最好。

做类似的事情：

$( document ).ready(function() {
    $("#parent").find("span").each(function(){
     console.log( $(this).html() );
    });
});

记录每个范围的html值。

获取span标签的所有innerhtml内容

6 个答案: