Wie laufen getElementsByTagName auf die Kinder eines Elements nur?

Ich bin mit Mühe einen Selektor, um richtig zu arbeiten.

Habe ich diese HTML:

<div.wrapper>
    <div.ui-controlgroup-controls>
        <form>
            <div.ui-btn></div>
        </form>
        <div.ui-btn></div>
        <div.ui-btn></div>
        <div.ui-btn></div>
        <div.ui-btn></div>
    </div>
</div>

und ich bin versucht zu wählen, die div tags, die Kinder ui-controlgroup-controls - was bedeutet, ohne was in der form.

Dies ist, was ich versuche:

//el is my div.wrapper element
el.children[0].getElementsByTagName("div");

Allerdings funktioniert dies nicht, da das div in der form landet in der Auswahl.

Frage:
Wie kann ich die Elemente korrekt, wenn ich nicht will, jQuery verwenden?

InformationsquelleAutor frequent | 2013-04-01

  1. 4

    Einen Weg, dies zu tun ist, Durchlaufen Sie die Liste von Knoten und überprüfen Sie die übergeordnete:

    var nodes = el.children[0].getElementsByTagName("div");
nodes = Array.prototype.slice.call(nodes);
nodes = nodes.filter(function(v, i){
    return v.parentElement === el.children[0]; 
});

    Ist hier eine demonstration dieses Ansatzes: http://jsfiddle.net/WLhY2/

    Eine einfachere (wenn auch weniger effiziente) Ansatz ist die Verwendung von querySelectorAll zum abrufen der relevanten Knoten über einen Selektor-Ausdruck:

    var divs = document.querySelectorAll('div.ui-controlgroup-controls > div')
    gute Idee. Warten auf eine kompliziertere Lösung. Ansonsten bekommst du das kräftig! Danke!

    InformationsquelleAutor Asad Saeeduddin

  2. 2

    Für den browser, unterstützt querySelectorAll:

    var divs = el.children[0].querySelectorAll("div");

    Für die Browser, die unterstützt die Verwendung von Scheibe auf NodeList (z.B. IE nicht, zumindest nicht IE < 9):

    var slice = Function.call.bind(Array.prototype.slice);

var divs = slice(el.children[0].children).filter(function(node) { 
               return node.tagName === "DIV"
           });

    Für die Browser, die nicht unterstützen, weder:

    var nodes = el.children[0].children;
var divs = [];

for (var l = nodes.length, node; node = nodes[--l];) {
  if (node.tagName === "DIV")
    divs.push(node);
}
    Danke für die alternativen

    InformationsquelleAutor ZER0

  3. 1

    In den meisten Browsern, die Sie tun können:

    el.querySelectorAll(".ui-controlgroup-controls > div")

    Aber dies könnte falsch positive Ergebnisse, wenn es mehr tief verschachtelten ".ui-controlgroup-controls" dass Sie vermeiden wollen.

    Wenn das der Fall ist, einfach Durchlaufen .children und Aufbau einer Sammlung von verschachtelten divs.

    var divs = [];

for (var i = 0, len = el.children.length; i < len; i++) {
    if (el.children[i].classname === "ui-controlgroup-controls") {
        for (var j = 0, lenj = el.children[i].children.length; j <, lenj; j++) {
            if (el.children[i].children[j].nodeName === "DIV") {
                divs.push(el.children[i].children[j])
            }
        }
    }
}

    Wenn es bekannt ist, dass Sie nur eine ui-controlgroup-controls element, dann Sie können loszuwerden, die äußere Schleife, und nutzen Sie einfach children[0].

    var divs = [];

for (var j = 0, lenj = el.children[0].children.length; j <, lenj; j++) 
    if (el.children[0].children[j].nodeName === "DIV") 
        divs.push(el.children[o].children[j])

    InformationsquelleAutor

  4. 0
    <your-element>.querySelectorAll(":scope > div");

    :scope ist eine pseudo-Klasse für das Eltern-element. Keine Unterstützung für IE, aber es ist ein shim.

    InformationsquelleAutor themefield

Schreibe einen Kommentar