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选择器的html元素

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

我使用实际代码创建了一个codepen：CodePen。 我不知道为什么一些似乎有用的答案对我的代码不起作用。

Answer 1

选择器的一部分：

table.table-condensed > tr

说“得到的桌子行是我桌子的直接儿童” - 但他们实际上是一个更低级别......

table.table-condensed > tbody > tr

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

table.table-condensed tr

Answer 2

＆＃13;

＆＃13;

$('table.table-condensed  tbody  tr').each(function(){
    $(this).find("td").each(function(key,value){
      $(".result").append($(value).text()+" | ");
    });
    $(".result").append("<hr>");
});

＆＃13;

.result{color:red;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用(class > childClass)表示孩子必须是DIRECT后裔（source）。所以你不能跳过级别。尝试使用

Closest()

或

Children()

Answer 4

您不必使用子选择器选择td元素。 table.tablec-condensed td将从具有td类的所有table元素中选择table-condensed个元素。这应该足够了。

您可以通过在前面添加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 5

您需要为td循环每个tr。第一个.each将迭代每个tr。再次循环每个tr以获取{{1} }}

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

Answer 6

实际的Jquery脚本将是：

＆＃13;

＆＃13;

$('.table-condensed tr').each(function(index, element){
  $(element).find('td').each(function(i, e){
   console.log(e.innerHTML);
  });
  console.log('\n');
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 7

您的选择器既错误又不必要地长。 >＆＃34;儿童组合子＆＃34;选择器只会选择直接的孩子，因此忽略了你之后的元素。 Learn more about the child combinator selector at Mozilla

始终尝试使用较短的直接选择器，例如：

$('.your-table tr');

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>