alle Eltern in der <ul><li>-Struktur mit jquery ermitteln

Question

Ich habe die folgende Struktur in HTML, die ich verwende, um eine Baumstruktur mit Jquery zu erstellen.

<ul>
        <li>Grand Parent
            <ul>
                <li>Parent
                    <ul>
                        <li>child</li></ul>
                </li>
            </ul>
        </li>
    </ul>

jedes li-Element hat eine Optionsschaltfläche neben sich (im Code nicht gezeigt, bitte davon ausgehen).

Wenn ich nun den Wert "Child" aus dem obigen Code auswähle, sollte ich das folgende Ergebnis erhalten "Großeltern > Elternteil > Kind" und wenn ich Elternteil auswähle, sollte ich folgendes erhalten "Großeltern > Elternteil"

So im Grunde die ich will, um Elternteil mit allen seinen Kind bekommen

Bitte beraten, wie kann ich das oben genannte Ergebnis mit jquery erhalten

Abschnitt 1

<ul class='tree js-catTree'><li><a class='expand'></a><span class='treeNodeInner'><input type='radio' name='category'><a id='10209'>Business</a><ul><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10212'>Top</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10214'>New</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10413'>Email and Messaging</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10414'>Finance</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10415'>Mobile Office</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10416'>Sales and Field Force</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10417'>Calculators  Converters</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10418'>Travel  Transportation</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10419'>Reference</a></span></li></ul></span></li><li><a class='expand'></a><span class='treeNodeInner'><input type='radio' name='category'><a id='10962'>asdasd</a><ul><li><a class='expand'></a><span class='treeNodeInner'><input type='radio' name='category'><a id='10964'>asd</a><ul><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10420'>Backup  Optimization</a></span></li></ul></span></li></ul></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10974'>test_23March</a></span></li></ul>

merci

Answer 1

Innerhalb eines Ereignis-Handlers für das Element

Fügen Sie diesen Code in Ihren Event-Handler ein, um alle Eltern zu erhalten:

$(this).parents('li').add(this).each(function() {
    // This should iterate through all parent <li>s and the current one too
});

Probieren Sie diese Demo aus: http:/

Auswahl anhand eines markierten Optionsfeldes

Wenn Sie die Elemente danach auswählen möchten, welches Optionsfeld markiert ist, können Sie einfach die .parents() Methode.

Angenommen, die folgende HTML-Auszeichnung wird verwendet:

<ul>
    <li><input type="radio" name="li"> Grand Parent
        <ul>
            <li><input type="radio" name="li"> Parent
                <ul>
                    <li><input type="radio" name="li"> child</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<button>Show me</button>

Im Klick-Ereignis der Schaltfläche können Sie Folgendes tun:

$('button').click(function() {
    var $obj = $('input[type="radio"]:checked').parents('li');

    // The $obj jQuery collection contains your result
});

Probieren Sie eine Demo aus: http://jsfiddle.net/XPL7G/1/

Breadcrumb-Pfad als Text abrufen

Da es verschachtelte Elemente gibt, können wir nicht die jQuery .text() Methode, da sie auch den kombinierten Text aller Kinder zurückgeben würde.

Die Lösung ist, ein Array unserer jQuery-Objekt zu machen, die Reihenfolge umzukehren, dann iterieren durch sie, Extrahieren der Text-Knoten mit rohen HTML-DOM-Funktionen, wie wir gehen (die Annahme der gleichen Markup wie oben ist das zweite Kind der Liste Element, das erste ist die Schaltfläche Radio).

$('button').click(function() {
    var $obj = $('input[type="radio"]:checked').parents('li');

    var result = '';
    $($obj.get().reverse()).each(function(){
        if(result) result += ' > ';
        result += this.childNodes[1].nodeValue;
    });

    // The variable result contains our text breadcrumb
});

Demo: http://jsfiddle.net/XPL7G/6/

Answer 2

Versuchen Sie dies:

console.log($('ul :parent'));//return all parent node within first `ul`

Answer 3

$(‘li’).parents()

listet alle Eltern der betreffenden li

Answer 4

$('input[type="radio"]').change(function() {
  var $el = $(this); //current radio
  var $parents = $el.parents('input[type="radio"]'); //parent radios
});

Answer 5

Ich verstehe nicht ganz, was Sie beabsichtigen.
Ich denke jedoch, dass die Kombination von Selektoren das Problem lösen kann. Zum Beispiel so etwas wie dieses sollte funktionieren:

$(':parent li')