jQuery Selektor funktioniert nicht auf Tabelle

Question

Ich möchte auf jeden td auf der Tabelle zugreifen, aber es gibt nichts zurück. Ich versuche, die jquery jede Funktion wie folgt zu verwenden:

$('div.daterangepicker > div.calendar-table > table.table-condensed > tr').each(function(index, element){ 
console.log(index); 
}); 

oder diese

$('table.table-condensed > tbody > tr').each(function(index, element){ 
console.log(element); 
}); 

Hier ist das HTML-Element, wo ich die jQuery-Selektor

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

ich codepen gemacht verwenden möchten mit dem tatsächlichen Code: CodePen. Ich weiß nicht, warum einige Antworten, die zu funktionieren scheinen, nicht mit meinem Code funktionieren.

Answer 1

Der Teil des Wählers:

table.table-condensed > tr 

sagt „Tabellenzeilen erhalten, die direkte Kinder von meinem Tisch sind“ - aber sie sind tatsächlich eine weitere Ebene nach unten ...

table.table-condensed > tbody > tr 

Und wenn Sie nicht so viel tun kümmern uns um es genau so zu sein, können Sie einfach alle Nachkommen finden:

table.table-condensed tr 

Answer 2

Verwendungbedeutet, dass das Kind ein DIRECT-Nachfolger sein muss (source). Sie können also keine Stufen überspringen. Versuchen Sie es mit entweder

Closest()

oder

Children()

Answer 3

Sie müssen die td Elemente nicht wählen Sie die Kinder Selektor. table.tablec-condensed td wählt die td Elemente aus allen table Elementen mit table-condensed Klasse. Was sollte genug sein.

Sie können es etwas präziser machen, indem daterangepicker in der Front und fügte hinzu: $('.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

Sie benötigen Schleife zu jeder td für eine tr .Die erste .each wird jedes tr iterieren. Erneut Schleife jedes tr zu erhalten 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

Die eigentliche JQuery-Skript wird:

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

Ihre Wähler ist falsch und unnötig lange.Der > "Kindkombinator" -Selektor wählt nur unmittelbare Kinder aus und ignoriert somit das Element, nach dem Sie suchen. Learn more about the child combinator selector at Mozilla.

versuchen immer ein kürzeres, direktes Selektor, zum Beispiel:

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

Nach jquery documentation die E > F Wähler nur für First-Level-Nachkommen funktionieren. So können Sie die td mit finden:

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