So erhalten Sie ChildNodes> ChildNodes (Kinder von Kindern)

Question

Nur JS no Jquery.

Wie bekomme ich alle ChildNodes Container und dann für jedes der Kinder dorthin Kinder?

Ich möchte keine ID zu jedem Wrapper hinzufügen, der untergeordnete Zeile ist. Ich versuche, mit "this" oder in diesem Index zu targetieren. Dieses Skript sollte dynamisch sein, ohne eine ID anzugeben. Ich kann Klassen nicht verwenden, um alle Wrapper zu erhalten, da ich jeden Wrapper separat auslösen und Änderungen darauf anwenden muss.

Ich möchte alle Gitter Zeile Kinder "Wrapper" Breiten und speichern in einem Array.

Ich verwende ChildNodes, da es mit allen Browsern kompatibel ist.

var container = document.getElementById('container'); 
 
var rows = container.childNodes; 
 
var rowslenght = container.childNodes.length; 
 

 
var rowsArray = new Array(); 
 

 
for (var i=0; i < rowslenght ; i++) { 
 
if (gridrow[i].nodeType == 1){ // this is to no retrieve text 
 

 
    // I got all the children of grid-row. How I get grid-row children. 
 
    // var rowsChildren = rows[i].getAttribute('id'); 
 

 
    // here goes other if to go through each "Wrapper" width and set width 
 

 
    // console.log(rowsChildren); 
 
    console.log(rows); 
 

 
return rowsArray; 
 
} 
 
}

<div id="container"> 
 
    <div class="grid-row"> 
 
     <div class="Wrapper"> 
 
       <div class="block"></div> 
 
     </div> 
 
    <div class="Wrapper"> 
 
       <div class="block"></div> 
 
     </div> 
 
    </div> 
 
    <div class="grid-row"> 
 
     <div class="Wrapper"> 
 
       <div class="block"></div> 
 
     </div> 
 
     <div class="Wrapper"> 
 
       <div class="block"></div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

bereits.

var container = document.getElementById('container'); 
 
var rows = container.childNodes; 
 
    rows = removeTextNode(rows); // remove Text Nodes; 
 

 
// Loop through .grid-row 
 
forEach(rows, function(row){ 
 
     
 
    // Get wrappers and filter them 
 
    var rowWrappers = row.childNodes; 
 
     rowWrappers = removeTextNode(rowWrappers);  
 
    // Now loop over the wrapper, and modify 
 
    // the current function adds `Wrapper-blue` to the wrappers. 
 
    forEach(rowWrappers, function(wrapper){ 
 
      console.log(wrapper); 
 
      wrapper.classList += ' Wrapper-blue'; 
 
    }); 
 

 
}); 
 

 
// this helper function removes extra spaces/breaklines which are considered as Nodes 
 
function removeTextNode(nodes){ 
 
    return [].filter.call(nodes, function(o){ 
 
     return o.nodeType == Node.ELEMENT_NODE; 
 
    }); 
 
} 
 

 
// Source: https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/ 
 
function forEach(array, callback, scope) { 
 
    for (var i = 0; i < array.length; i++) { 
 
    // the first argument is thisArg which is the context and can used as `this` in the callback 
 
    callback.call(scope, array[i], i); // passes back stuff we need 
 
    } 
 
};

.Wrapper-blue { 
 
    background:#ddd; 
 
    margin:5px; 
 
    width:60px; 
 
    height:60px; 
 
}

<div id="container"> 
 
    <div class="grid-row"> 
 
     <div class="Wrapper"> 
 
       <div class="block"></div> 
 
     </div> 
 
    <div class="Wrapper"> 
 
       <div class="block"></div> 
 
     </div> 
 
    </div> 
 
    <div class="grid-row"> 
 
     <div class="Wrapper"> 
 
       <div class="block"></div> 
 
     </div> 
 
     <div class="Wrapper"> 
 
       <div class="block"></div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

rows[i].childNodes geben Ihnen die Wrapper Elemente innerhalb jedes grid-row, aber dann werden Sie eine Schleife durch sie auch haben.

Answer 3

Dies ist nicht so schwer wie Sie es machen; Sie müssen nicht mehrere Schleifen machen.

Die unten wird von allen modernen Browsern unterstützt, darunter IE 9+ https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

var container = document.getElementById('container'); 
var rows = container.getElementsByClassName('grid-row'); 
// NOTE: this assumes that you only want to get wrappers which are children of grid-rows which are children of a container 

var wrapperChildren = []; 

rows.forEach(function(row) { 
    var wrappers = row.getElementsByClassName('Wrapper'); 
    // per comments, adding child count 
    row['data-child-count'] = wrappers.length; 

    wrapperChildren.concat(wrappers); 
}); 

Es wird noch einfacher, wenn die Wrapper bereits nur innerhalb Raster-Zeilen sind (dann könnte man einfach alle von ihnen wählen nach Klasse Name). Working fiddle

EDIT

Per den Kommentar, wollen Sie wissen, wie viele Kinder jede Zeile hat, das ist einfach wie ein Datenattribut (oder jede andere benutzerdefinierte Attribute) hinzufügen und dann zugreifen, nachdem diese Funktion ausgeführt wurde.

Answer 4

Ich konnte die zweite Schleife nicht richtig machen, da ich in der ersten Schleife alle childNodes inklusive der leeren Textfelder bekommen habe. Ich musste zuerst die die für Anweisung und als nur filtern diejenigen auszuführen, die nodeType == hat 1.

var container = document.getElementById('container'); 
var rows = container.childNodes; 
var rowslenght = container.childNodes.length; 

var rowsArray = new Array(); 

// Get all the grid-row and run through them 
for (var a=0; a < rowslenght ; a++) { 

// If it is a HTML element than go through 
if (gridrow[a].nodeType == 1){ 

     var wpChildren = gridrow[a].childNodes; 
     var wpChildrenleght = gridrow[a].childNodes.length; 

     // Run through all the wrappers 
     for (var b =0; b < wpChildrenleght; b++){ 

     // only get grid-wrapper html 
     if (wpChildren[b].nodeType == 1){ 
       console.log(wpChildren[b]) // here is your specific div 
      } 
     } 

    } 
}