获取span标签的所有innerhtml内容
[英]Get all innerhtml contents of span tags
问题描述
I am trying to get the content of all span tags that are children of div#parent and I am not able to do it, I just get the first one.
我正在尝试获取作为 div#parent 子项的所有跨度标签的内容，但我无法做到，我只获得了第一个。 Could someone help me, please!有人可以帮我吗，拜托！
$( document ).ready(function() { var allspans=$("#parent").find("span").html(); console.log( allspans ); });
<!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>
Thank you!谢谢！ Best Regards!最好的问候！
7 个解决方案
解决方案1
1 2017-08-10 06:18:31
You can iterate over the span 's using .each , and then access their individual innerHTML 's like this.您可以使用.each迭代span ，然后像这样访问它们各自的innerHTML 。 Through the .each you can then combine the inner HTML content in an array or string.通过.each您可以将内部 HTML 内容组合到一个数组或字符串中。
Or, you could get the inner text of all span 's by $("#parent").text() .或者，您可以通过$("#parent").text()获取所有span的内部文本。
$(document).ready(function() { $("#parent").find("span").each(function() { console.log($(this).html()); }); console.log($("#parent").text()); });
<!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>
解决方案2
1 2021-02-21 10:10:11
JQuery is slow and unnecessary for that. JQuery 很慢而且没有必要。
spans = document.getElementById("parent").getElementsByTagName("span");
returns an array of all spans in parent.返回父级中所有跨度的数组。
At this point the task is complete , as I could understand it: spans[span_number].innerHTML is what you want.此时任务完成，正如我所理解的： spans[span_number].innerHTML就是你想要的。
Then just parse that spans array in any way (foreach or whatever you like):然后只需以任何方式（foreach 或您喜欢的任何方式）解析 span 数组：
for(var i = 0, len = spans.length; i < len; i++ )
{
console.log(spans[i].innerHTML);
}
Avoid JQuery in any means (when possible) to make your code more independent, fast, less resource-intensive and robust.以任何方式（在可能的情况下）避免使用 JQuery 以使您的代码更加独立、快速、资源占用更少且健壮。 Save traffic.节省流量。
解决方案3
0 已采纳 2017-08-10 06:17:45
Try with map() and get() function .You will get the all the span tag innerHTML with in array尝试使用map()和get()函数。您将获得数组中的所有 span 标签 innerHTML
$( document ).ready(function() { var allspans=$("#parent").find("span").map(function(){ return $(this).html(); }).get() console.log( allspans ); });
<!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>
解决方案4
0 2017-08-10 06:17:57
You need to use some loop until $("#parent").find("span").length, by default jquery html function will returns the first matched element content:您需要使用一些循环直到 $("#parent").find("span").length，默认情况下 jquery html 函数将返回第一个匹配的元素内容：
var html = '';
var allspans = $("#parent").find("span");
for(var i=0;i<allspans.length;i++){
html += allspans[i].innerHTML;
}
解决方案5
0 2017-08-10 06:21:05
$( 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>
You can use .each() to iterate through an array of element, and then use .html() to get text from individual element.您可以使用.each()遍历元素数组，然后使用.html()从单个元素获取文本。
解决方案6
0 2017-08-10 06:21:36
Try this试试这个
var arraySpan = [];
$('span').each(function() {
arraySpan.push(this.innerHTML);
});
解决方案7
0 2017-08-10 06:26:54
You would need to loop through each span matched by the selector and console log each html value or concatenate them into a variable or push them to an array variable;您需要遍历选择器匹配的每个跨度，并在控制台记录每个 html 值或将它们连接到一个变量或将它们推送到一个数组变量； depending on whatever works best.取决于什么效果最好。
Do something like:做类似的事情：
$( document ).ready(function() {
$("#parent").find("span").each(function(){
console.log( $(this).html() );
});
});
to log the html value of each span.记录每个跨度的 html 值。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.