2016-05-08 2 views
3

ich JavaScript zur Zeit neu bin (ich bin mit jQuery) und ich frage mich, wie ichAuswahl relativ Kind Tags jquery

<Something attribute="first"> 
    <div class="container"> 
     <Something attribute="second" /> 
     <Something attribute="third"> 
      <Something attribute="fourth" /> 
     </Something> 
    </div> 
</Something> 
<Something attribute="fifth"> 
    <Something attribute="sixth" /> 
</Something> 

I-Code hatte alle Kinder Something Tags aus dem folgenden HTML wählen könnte, wie so zu wählen Sie sowohl das Kind Something Tags

$("Something[attribute='first']").children("Something").each({}); 

aber wegen des div nicht funktioniert dazwischen. Wie kann ich alle Tags umgehen, die nicht Something sind, und nur die Elemente auswählen, die eine Ebene tief sind, wenn Sie alle Tags entfernen, die nicht Something sind? Also, wenn ich die Kinder des Something Tags mit Attribut first abfragen möchte, würde ich second und third (nicht fourth oder sixth) bekommen. Ebenso, wenn ich fifth Abfrage würde ich sixth

HINWEIS Leider bekommen für darüber unklar zu sein, aber ich will nur die Something Tags eine Ebene nach dem Something Tag, deren Kinder ich zu finden versuche. So möchte ich beispielsweise in dem obigen HTML-Code nicht, dass die Abfrage das Something-Tag mit dem Attribut fourth zurückgibt. Also im Wesentlichen, wenn Sie die Tags zwischen jedem anderen Something Tag entfernen Ich möchte die Tags, die nur eine Ebene tief von der in Frage sind.

HINWEIS Es können auch andere Tags werden zwischen den Something Tags, nicht nur die eine div. Zum Beispiel kann das obige sein

<Something attribute="first"> 
    <div class="container"> 
     <div class="container"> 
      <Something attribute="second" /> 
      <Something attribute="third"> 
       <Something attribute="fourth" /> 
      </Something> 
     </div> 
    </div> 
</Something> 
<Something attribute="fifth"> 
    <div> 
     <div> 
      <Something attribute="sixth" /> 
     </div> 
    </div> 
</Something> 

und die gleichen Auswahlkriterien würden gelten. So würden die Ergebnisse

first -> [second, third] 
third -> [fourth] 
[fifth] -> [sixth] 

Eine rekursive Lösung in Pseudo-Code für das, was ich würde sein wollen

function get_immediate_children_for(element, array_of_children) { 
    $(element).children().each(function() { 
     if (this.tagName == "SOMETHING") { 
      array_of_children.push(this); 
     } 
     else { 
      get_immediate_children_for(this, array_of_children); 
     } 
    }); 
} 

und Sie würden dies nennen, wie so

var array_of_children = get_immediate_children_for($("Something[attribute='first']")); 

Antwort

0

EDIT (wegen bearbeitet Frage)

Wenn Sie eine einzelne Ebene möchten nach dem Kind eines bestimmten Elements, verwenden Sie dann so etwas wie dieses:

$("Something[attribute='first']").children("div").children("Something").each({}); 

Statt .children() Verwendung .find()

(von jquery docs)

Die .children (Methode) unterscheidet sich von .find() darin, dass .children() nur eine Ebene unterhalb des DOM-Baums zurücklegt, während .find() mehrere Ebenen durchlaufen kann, um auch untergeordnete Elemente (Enkel usw.) auszuwählen.

+0

Es tut mir Leid! Ich war in meiner Frage nicht klar. Ich aktualisierte es mit einer Notiz – Curious

+0

Ich aktualisierte die Frage erneut! Ich glaube nicht, dass ich am Anfang überhaupt klar war :( – Curious

3

JSFiddle: https://jsfiddle.net/qdhnfdcx/

var elem = document.getElementsByTagName("something"); 

function getChildren(name) { 
    var list = [] 
    var len = name.length; 

    for (var i = 0; i < len; i++) { 
    if(name[i].parentElement.className != name[i].className) { 
     for (var j = 0; j < len; j++) { 
     return list.push(name[i].children[j])); 
     } 
    } 
    } 
} 

getChildren(elem); 

Sie wie folgt:

var allChildren = document.getElementsByTagName("Something"); 

Dann können Sie einfach den entsprechenden Index wählen:

allChildren[0]; 
allChildren[1]; 

Oder Sie könnten Schleife und bearbeiten alle von ihnen:

for (var i = 0, len = allChildren.length; i < len; i++) { 
    allChildren[i].style.display = "none"; 
} 

Wenn Sie bestimmte Somethings wollen erscheinen nicht dann tun:

for (var i = 0, len = allChildren.length; i < len; i++) { 
    if(allChildren[i].getAttribute("attribute") != "fourth") { 
    allChildren[i].style.display = "none"; 
    } 
} 

Wenn Sie nur die etwas Tags eine Ebene nach den etwas tags:

for (var i = 0, len = allChildren.length; i < len; i++) { 
    if(allChildren[i].className == allChildren[i].parentElement.className) { 
    allChildren[i].style.display = "none";. 
    } 
} 
+0

Es tut mir leid! Ich war in meiner Frage unklar. Ich aktualisierte es mit einer Notiz. Entschuldigung! – Curious

+1

@Curious ok krank meine Frage aktualisieren:) – Asperger

+1

@ Neugierig wird das tun? Ich denke, dass ich nicht ganz verstehe, aber lassen Sie mich wissen, dass das was Sie wollen – Asperger

0
var smth = document.getElementsByTagName('Something')[0]; 
var chindren = smth.getElementsByTagName('Something'); 
for(var i = 0, el;el = children[i];++i){ 
//do what you want 
} 

bearbeiten 1 (endgültig)
Ich antwortete auf die erste Ausgabe des q Frage.
Mögliche Antwort ist das aktuelle Dokument als XML konvertieren/lesen und entsprechend verwalten. Oder parsen Sie inner/outerHTML zu einem Knotenbaum. Es gibt viele Fallstricke auf beiden Wegen (einschließlich der Browser-Kompatibilität, zumindest), aber es ist der einzige Ansatz für das Problem.

0
$("Something").each(function() { 
var childSomething = $(this).find("Something"); 
$.each(childSomething,function() { 
//do something 
}); 
}); 
0

Sie können die Funktion jquery find verwenden, um dies zu erreichen. Gefällt mir:

$("Something[attribute='first']").find("div > Something").each({}); 
+0

Das wird mir alles geben, was mehr als eine Ebene tief ist. Ich möchte nur Dinge, die eine Ebene tief sind, wenn Sie alles andere als die 'Something'-Tags entfernen. Was du gesagt hast, würde "viertes" auch von meiner Frage zurückkommen. Aber ich will nicht, dass – Curious

+0

Aktualisiert Selektor in meiner Antwort, um direkt Kind von Div auswählen. –

+0

Ich habe meine Frage mit einer anderen Notiz aktualisiert, um genauer zu sein. Weißt du, wie ich das gewünschte Ergebnis erreichen kann? – Curious

0

Danke für die Antworten! Ich glaube nicht, dass jQuery oder Javascript entweder eine native Art und Weise, dies zu tun, sondern eine einfache rekursive Lösung dieses Problems

function get_immediate_children_for(element) { 
    var array_of_children = []; 
    get_immediate_children_for_helper(element, array_of_children); 
    console.log(array_of_children); 
    return array_of_children; 
} 
function get_immediate_children_for_helper(element, array_of_children) { 
    $(element).children().each(function() { 
     console.log(this.tagName); 
     if (this.tagName == "ACTIVITY") { 
      array_of_children.push(this); 
      console.log(array_of_children); 
     } 
     else { 
      get_immediate_children_for_helper(this, array_of_children); 
     } 
    }); 
} 

sein würde, dass also jetzt get_immediate_children_for($("Activity[path='']")) die Elemente einer Ebene zurückkehren würde tief alle anderen Tags ignorieren