jQuery选择器不工作在桌上

Question

我想访问表上的每个td，但它什么都不返回。我尝试使用了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。 我不知道为什么一些似乎工作的答案不适用于我的代码。

Answer 1

选择的部分：

table.table-condensed > tr 

说“让那个是我表的直接子表行” - 但它们实际上是一个多水平下降...

table.table-condensed > tbody > tr 

而且如果你不太关心它，你可以找到所有的后代：

table.table-condensed tr 

Answer 2

使用(class > childClass)表示孩子必须是DIRECT后代（source）。所以你不能跳过关卡。尝试使用任何

Closest()

或

Children()

Answer 3

您没有选择使用儿童选择的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>

Answer 4

您需要循环每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>

Answer 5

实际的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>

Answer 6

你的选择是错的都和不必要的长。>“孩子combinator”选择器将只选择直接的孩子，因此忽略你后面的元素。 Learn more about the child combinator selector at Mozilla。

总是尝试使用较短的，直接的选择，例如：

$('.your-table tr');

Answer 7

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

Answer 8

据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>