jQuery选择器不工作在桌上
问题描述:
我想访问表上的每个td,但它什么都不返回。我尝试使用了jQuery这样每个功能:jQuery选择器不工作在桌上
$('div.daterangepicker > div.calendar-table > table.table-condensed > tr').each(function(index, element){
console.log(index);
});
或本
$('table.table-condensed > tbody > tr').each(function(index, element){
console.log(element);
});
这里就是我想用jQuery选择
<div class="daterangepicker dropdown-menu ltr single opensleft show-calendar">
<div class="calendar left single">
<div class="daterangepicker_input">
<div class="calendar-table">
<table class="table-condensed">
<tbody>
<tr>
<td class="weekend off available" data-title="r0c0">24</td>
<td class="off available" data-title="r0c1">25</td>
<td class="off available" data-title="r0c2">26</td>
<td class="off available" data-title="r0c3">27</td>
<td class="off available" data-title="r0c4">28</td><td class="off available" data-title="r0c5">29</td>
<td class="weekend off available" data-title="r0c6">30</td>
</tr>
<tr>
<td class="weekend available" data-title="r1c0">1</td>
<td class="available" data-title="r1c1">2</td>
<td class="available" data-title="r1c2">3</td>
<td class="available" data-title="r1c3">4</td>
<td class="available" data-title="r1c4">5</td>
<td class="available" data-title="r1c5">6</td>
<td class="weekend available" data-title="r1c6">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
html元素
我做了一个codepen与实际的代码:CodePen。 我不知道为什么一些似乎工作的答案不适用于我的代码。
答
选择的部分:
table.table-condensed > tr
说“让那个是我表的直接子表行” - 但它们实际上是一个多水平下降...
table.table-condensed > tbody > tr
而且如果你不太关心它,你可以找到所有的后代:
table.table-condensed tr
答
您没有选择使用儿童选择的td
元素。 table.tablec-condensed td
将选择具有table-condensed
类的所有table
元素中的td
元素。这应该够了。
你可以把它稍微更具体的在前面加daterangepicker
:$('.daterangepicker table.table-condensed td')
$('.daterangepicker table.table-condensed td').each(function(index, element){
console.log(element);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="daterangepicker dropdown-menu ltr single opensleft show-calendar">
<div class="calendar left single">
<div class="daterangepicker_input">
<div class="calendar-table">
<table class="table-condensed">
<tbody>
<tr>
<td class="weekend off available" data-title="r0c0">24</td>
<td class="off available" data-title="r0c1">25</td>
<td class="off available" data-title="r0c2">26</td>
<td class="off available" data-title="r0c3">27</td>
<td class="off available" data-title="r0c4">28</td><td class="off available" data-title="r0c5">29</td>
<td class="weekend off available" data-title="r0c6">30</td>
</tr>
<tr>
<td class="weekend available" data-title="r1c0">1</td>
<td class="available" data-title="r1c1">2</td>
<td class="available" data-title="r1c2">3</td>
<td class="available" data-title="r1c3">4</td>
<td class="available" data-title="r1c4">5</td>
<td class="available" data-title="r1c5">6</td>
<td class="weekend available" data-title="r1c6">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
答
您需要循环每td
为tr
。首先.each
将遍历每个tr
。再次循环每个tr
得到td
$('table.table-condensed tr').each(function(index, element) {
$(element).each(function(el, em) {
console.log($(em).text())
})
});
or this $('table.table-condensed > tbody > tr').each(function(index, element) {
console.log(element);
}
);
Here's the html element where I want to use the jquery selector
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="daterangepicker dropdown-menu ltr single opensleft show-calendar">
<div class="calendar left single">
<div class="daterangepicker_input">
<div class="calendar-table">
<table class="table-condensed">
<tbody>
<tr>
<td class="weekend off available" data-title="r0c0">24</td>
<td class="off available" data-title="r0c1">25</td>
<td class="off available" data-title="r0c2">26</td>
<td class="off available" data-title="r0c3">27</td>
<td class="off available" data-title="r0c4">28</td>
<td class="off available" data-title="r0c5">29</td>
<td class="weekend off available" data-title="r0c6">30</td>
</tr>
<tr>
<td class="weekend available" data-title="r1c0">1</td>
<td class="available" data-title="r1c1">2</td>
<td class="available" data-title="r1c2">3</td>
<td class="available" data-title="r1c3">4</td>
<td class="available" data-title="r1c4">5</td>
<td class="available" data-title="r1c5">6</td>
<td class="weekend available" data-title="r1c6">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
答
实际的jQuery脚本将是:
$('.table-condensed tr').each(function(index, element){
$(element).find('td').each(function(i, e){
console.log(e.innerHTML);
});
console.log('\n');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="daterangepicker dropdown-menu ltr single opensleft show-calendar">
<div class="calendar left single">
<div class="daterangepicker_input">
<div class="calendar-table">
<table class="table-condensed">
<tbody>
<tr>
<td class="weekend off available" data-title="r0c0">24</td>
<td class="off available" data-title="r0c1">25</td>
<td class="off available" data-title="r0c2">26</td>
<td class="off available" data-title="r0c3">27</td>
<td class="off available" data-title="r0c4">28</td><td class="off available" data-title="r0c5">29</td>
<td class="weekend off available" data-title="r0c6">30</td>
</tr>
<tr>
<td class="weekend available" data-title="r1c0">1</td>
<td class="available" data-title="r1c1">2</td>
<td class="available" data-title="r1c2">3</td>
<td class="available" data-title="r1c3">4</td>
<td class="available" data-title="r1c4">5</td>
<td class="available" data-title="r1c5">6</td>
<td class="weekend available" data-title="r1c6">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
答
你的选择是错的都和不必要的长。>
“孩子combinator”选择器将只选择直接的孩子,因此忽略你后面的元素。 Learn more about the child combinator selector at Mozilla。
总是尝试使用较短的,直接的选择,例如:
$('.your-table tr');
答
$('table.table-condensed tbody tr').each(function(){
$(this).find("td").each(function(key,value){
$(".result").append($(value).text()+" | ");
});
$(".result").append("<hr>");
});
.result{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="daterangepicker dropdown-menu ltr single opensleft show-calendar">
<div class="calendar left single">
<div class="daterangepicker_input">
<div class="calendar-table">
<table class="table-condensed">
<tbody>
<tr>
<td class="weekend off available" data-title="r0c0">24</td>
<td class="off available" data-title="r0c1">25</td>
<td class="off available" data-title="r0c2">26</td>
<td class="off available" data-title="r0c3">27</td>
<td class="off available" data-title="r0c4">28</td><td class="off available" data-title="r0c5">29</td>
<td class="weekend off available" data-title="r0c6">30</td>
</tr>
<tr>
<td class="weekend available" data-title="r1c0">1</td>
<td class="available" data-title="r1c1">2</td>
<td class="available" data-title="r1c2">3</td>
<td class="available" data-title="r1c3">4</td>
<td class="available" data-title="r1c4">5</td>
<td class="available" data-title="r1c5">6</td>
<td class="weekend available" data-title="r1c6">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<hr>
<div class="result"></div>
答
据jQuery的documentation的E > F
选择仅适用于第一级的后代。 所以,你可以找到td
使用:
$('table.table-condensed > tbody > tr > td')
//better option
$('table.table-condensed').find('td')
console.log($('table.table-condensed > tbody > tr > td').length);
console.log($('tr > td').length);
console.log($('table.table-condensed').find('td').length);
$('table.table-condensed').find('td').css({'background': 'red'})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="daterangepicker dropdown-menu ltr single opensleft show-calendar">
<div class="calendar left single">
<div class="daterangepicker_input">
<div class="calendar-table">
<table class="table-condensed">
<tbody>
<tr>
<td class="weekend off available" data-title="r0c0">24</td>
<td class="off available" data-title="r0c1">25</td>
<td class="off available" data-title="r0c2">26</td>
<td class="off available" data-title="r0c3">27</td>
<td class="off available" data-title="r0c4">28</td><td class="off available" data-title="r0c5">29</td>
<td class="weekend off available" data-title="r0c6">30</td>
</tr>
<tr>
<td class="weekend available" data-title="r1c0">1</td>
<td class="available" data-title="r1c1">2</td>
<td class="available" data-title="r1c2">3</td>
<td class="available" data-title="r1c3">4</td>
<td class="available" data-title="r1c4">5</td>
<td class="available" data-title="r1c5">6</td>
<td class="weekend available" data-title="r1c6">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
'div.calendar-table'不div.daterangepicker'的'一个孩子,所以你的第一选择权失败已经存在。 – CBroe
你的选择器是用'>'来定位直系后代,但不是所有的后代都是直接的 – andrew
你的第二种方法可以正常工作,除非你希望得到别的东西吗? – Walk