Jquery 获取div的span标记
我有一张这样的桌子:Jquery 获取div的span标记,jquery,css,html,css-selectors,Jquery,Css,Html,Css Selectors,我有一张这样的桌子: <div id="table"> <div class="header-row row"> <span class="cell primary">Team</span> <span class="cell">GP</span> <span class="cell">W</span> </div> <div class="row
<div id="table">
<div class="header-row row">
<span class="cell primary">Team</span>
<span class="cell">GP</span>
<span class="cell">W</span>
</div>
<div class="row">
<input type="radio" name="expand">
<span class="cell primary" data-label="Team">Real Klarin</span>
<span class="cell" data-label="GP">1</span>
<span class="cell" data-label="W">0</span>
</div>
<div class="row">
<input type="radio" name="expand">
<span class="cell primary" data-label="Team">Cage</span>
<span class="cell" data-label="GP">5</span>
<span class="cell" data-label="W">4</span>
</div>
</div>
// not selecting the header "cells"
$('#table [data-label]').each(function(i, el) {
console.log($(el).text());
})
但是它打印HTML对象和span
标记,这让我感到困惑。有什么想法吗
编辑: 是一种进步,但现在我得到了: 团队 全科医生 W 真正的克莱林
我怎么能跳过第一节?或者,换句话说,如何跳过带有.header行的div?您可以这样做:
$('.row:not(.header-row)').each(function(){
$(this).find('span').each(function(){
console.log($(this).text());
});
});
它所做的是“对于不是标题行的每一行,执行以下操作:”
'对于此范围内的每个跨度,记录其文本(标记内的文本)尝试此操作。您正在记录DOM元素,而不是从jQuery包装的DOM元素中提取的文本
$('#table div span').each(function (index) {
console.log($(this).text());
});
或者,您可以稍微改变选择策略,而不是嵌套循环(如each内部的each)。查看目标元素,我注意到一个具有自定义数据属性(即数据标签
)的公共线程;因此,您也可以这样选择:
<div id="table">
<div class="header-row row">
<span class="cell primary">Team</span>
<span class="cell">GP</span>
<span class="cell">W</span>
</div>
<div class="row">
<input type="radio" name="expand">
<span class="cell primary" data-label="Team">Real Klarin</span>
<span class="cell" data-label="GP">1</span>
<span class="cell" data-label="W">0</span>
</div>
<div class="row">
<input type="radio" name="expand">
<span class="cell primary" data-label="Team">Cage</span>
<span class="cell" data-label="GP">5</span>
<span class="cell" data-label="W">4</span>
</div>
</div>
// not selecting the header "cells"
$('#table [data-label]').each(function(i, el) {
console.log($(el).text());
})
这是一种比在嵌套的中选择和筛选dom更有效的策略。each()
调用。只需像这样使用.text()方法:
<script type="text/javascript">
$(function() {
$('#table div span').each(function() {
var text = $(this).text();
console.log(text);
});
});
</script>
$(函数(){
$('#table div span')。每个(函数(){
var text=$(this.text();
console.log(文本);
});
});
更多信息:要跳过第一个div,您需要
:not
选择器或js中的.not()
$('#table div:not(:first)').each(function (index) {
if(index == 1){ // index starts from 0 so for second record use 1
$(this).find('span').each(function(){
console.log($(this).text());
});
}
});
或
console.log(this.textContent)代码>谢谢@Siguza,这是一个好的举动。你预见到了我的编辑,你是谁,阿拉卡萨姆?:)谢谢谢谢Todd,但这不会像另一个答案那样跳过第一节,+1表示指向正确的方向。@gsamaras没问题!我添加了另一种方法,您可能也会喜欢。与Todd的评论相同,请在发布前阅读其他答案。@gsamaras不客气。。您可以阅读有关Thank Yousef的内容,但我想找到一种方法来访问特定的div,例如second team,因此我现在正在查找eq()
@gsamaras对于第二个团队,您可以尝试$('table div:not(:first').eq(1).查找('span“first').text();或者您可以在不使用:not…$('table div:eq(2)').find('span:eq(0)').text()的情况下使用它;…这是越来越多的方法:)@gsamaras更新的答案可能会有帮助,祝你好运:)@gsamaras信不信由你这与努力或投票无关这与如何帮助他人有关需要帮助的人有关无论如何谢谢,希望代码对你有帮助再次祝你好运:)
$('#table div').not(':first').find('span').each(function (index) {
console.log($(this).text());
});