获取span标签的所有innerhtml内容

问题描述：

我试图获取div＃parent的所有子标签的内容，并且我无法做到，我只是得到第一个。请有人帮助我！获取span标签的所有innerhtml内容

$(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>

谢谢！最好的问候！

答

尝试用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>

答

您需要使用一些循环，直到$（ “＃父”） .find（“span”）。length，默认情况下jquery html函数会返回第一个匹配元素的内容：

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

答

您可以使用.each来遍历span，然后像这样访问它们各自的innerHTML。通过.each，您可以将内部HTML内容组合到数组或字符串中。

或者，您可以通过$("#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>

答

$(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>

您可以使用3210通过元素的数组迭代，然后用.html()摆脱个别元素的文本。

答

尝试此

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

答

你会需要遍历由选择器和控制台匹配每个跨度登录每个HTML值或将它们连接成一个变量或它们推到一个数组变量;取决于最好的作品。

做这样的事情：

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

记录每个跨度的HTML值。

获取span标签的所有innerhtml内容

相关推荐