jQuery-Methoden (.css, .html, etc.) nicht nach innen für

Question

Arbeit Gibt es einen Grund, warum die Methoden außerhalb der Schleife zu arbeiten und nicht nach innen? Ich arbeite noch nicht einmal mit den Positionen und Farb- oder Textänderungen funktionieren auch nicht.

Um die Frage ein bisschen mehr zu verlängern, was ich versuche, den Text von verschiedenen Tabellenpositionen zu tun ist, zu ändern. Die Iteration funktioniert auch gut.

 $('#tbody_tabla > tr:nth-child(3) > td:nth-child(5)').css("color", "red"); 

     for (var i = 0; i < fechas.length; i++) { 
      for (var j = 0; j < nombres.length; j++) { 
       $('#tbody_tabla > tr:nth-child(3) > th:nth-child(3)').css("color", "red"); 
       $('#tbody_tabla > tr:nth-child(4) > th:nth-child(4)').html("val"); 

       } 
     } 

     $('#tbody_tabla > tr:nth-child(3) > td:nth-child(2)').css("color", "red"); 
     $('#tbody_tabla > tr:nth-child(2) > td:nth-child(2)').html('HOLA'); 

Ich werde die HTML hinzufügen zu

<table class="table table-bordered" id="tabla_servicios" style="width:100%; padding:12px"> 
<tbody id="tbody_tabla"> 
    <tr> 
     <th></th> 
     <th>2014-01-01 00:00:00</th> 
     <th>2014-02-13 00:00:00</th> 
     <th>2014-03-01 00:00:00</th> 
     <th>2014-04-01 00:00:00</th> 
    </tr> 
    <tr> 
     <th>Value2</th> 
     <td>2,2</td> 
     <td>2,3</td> 
     <td>2,4</td> 
     <td>2,5</td> 
    </tr> 
    <tr> 
     <th>Value3</th> 
     <td>3,2</td> 
     <td>3,3</td> 
     <td>3,4</td> 
     <td>3,5</td> 
    </tr> 
    <tr> 
     <th>Value4</th> 
     <td>4,2</td> 
     <td>4,3</td> 
     <td>4,4</td> 
     <td>4,5</td> 
    </tr> 
    <tr> 
     <th>Value5</th> 
     <td>5,2</td> 
     <td>5,3</td> 
     <td>5,4</td> 
     <td>5,5</td> 
    </tr> 
    <tr> 
     <th>Value6</th> 
     <td>6,2</td> 
     <td>6,3</td> 
     <td>6,4</td> 
     <td>6,5</td> 
    </tr> 
    <tr> 
     <th>Value7</th> 
     <td>7,2</td> 
     <td>7,3</td> 
     <td>7,4</td> 
     <td>7,5</td> 
    </tr> 
    <tr> 
     <th>Value8</th> 
     <td>8,2</td> 
     <td>8,3</td> 
     <td>8,4</td> 
     <td>8,5</td> 
    </tr> 
</tbody> 
</table> 

Demo fiddle

Answer 1

ich nie Subselects zuvor so gesehen haben.

$('#tbody_tabla > tr:nth-child(3) > td:nth-child(5)') 

Ich denke, seine schlechte Praxis-Suche für die Zelle zu haben, wenn eine benannte Zelle schneller und einfacher zu debuggen. Warum nennst du die td-Tags nicht?

$("#tbody_tabla > tr").eq(3).children().eq(5).css("color", "red"); 

Das obige könnte funktionieren. Wenn Sie dies nicht tun, stellen Sie Beispiel-HTML bereit, damit die Leute bessere Chancen haben, Ihnen zu helfen.

Siehe auch: http://api.jquery.com/find/

EDITED: @ joseph-marikle mit Kindern vorgeschlagen() statt finden()

Answer 2

Der Wähler außerhalb der Schleife ist für td Kind-Elemente suchen, dass existieren in Ihr Markup und die Selektoren innerhalb Ihrer Schleife suchen für th untergeordnete Elemente, die nicht vorhanden sind.

In der Geige Sie zur Verfügung gestellt, müssen Sie dies in der Schleife:

$('#tbody_tabla > tr:nth-child(3) > th:nth-child(3)').css("color", "red"); 
    $('#tbody_tabla > tr:nth-child(4) > th:nth-child(4)').html("val"); 

Aber es sollte sein:

$('#tbody_tabla > tr:nth-child(3) > td:nth-child(3)').css("color", "red"); 
    $('#tbody_tabla > tr:nth-child(4) > td:nth-child(4)').html("val"); 

Da es gewohnt‘in jeder anderen Zeile mehrere th Elemente sein neben Zeile 1.

auch bin ich ratlos, was in der Geige Ihre Loops zu tun, da Sie nicht mit der Schleife var werden Ich bin überall erreichbar. Sie werden immer wieder dieselben Elemente durchlaufen und versuchen, jedes Mal dasselbe zu tun.

Answer 3

Das Problem ist mit diesem Teil des Codes

$('#tbody_tabla > tr:nth-child(3) > th:nth-child(3)').css("color", "red"); 
$('#tbody_tabla > tr:nth-child(4) > th:nth-child(4)').html("val"); 

hier Sie für 3.-te Element suchen direkt als Kind in der 3. Stb vom Tisch.

Aber Sie haben einen Blick auf Ihren Code sehen Sie in jedem tr nur ein th ist, so wird es nicht die 3. oder 4. th in späteren Fällen mit einem tr finden.

Problematic part 
    > th:nth-child(3) 
    > th:nth-child(4) 

Lösung

1) Entweder ändern diese th die Elementnummer

> td:nth-child(4) 
> td:nth-child(5) 

2) Ändern Sie alle td td und anpassen th und Sie Code funktioniert

Arbeits Geige - https://jsfiddle.net/xs4djbrd/5/