it-swarm.com.de

jQuery Findet und listet alle LI-Elemente innerhalb eines UL innerhalb eines bestimmten DIV auf

Ich habe 3 Spalten mit ULs, von denen jede einen dynamischen UL-Container mit 0 bis 9 LI-Containern (eventuell mehr) enthalten kann. Alle meine LI-Elemente haben ein Attribut "rel", das ich letztendlich zu finden versuche und für etwas anderes in allen LI-Elementen innerhalb dieser übergeordneten DIV verwende. Ich möchte irgendwann mehr basierend auf jedem finden, aber nicht zuletzt die rel .. Irgendwelche Ideen, wie ich das mit jQuery erreichen kann? Beispiel:

<ul id="column1">
   <li rel="1">Info</li>
   <li rel="2">Info</li>
   <li rel="3">Info</li>
</ul>
<ul id="column2">
   <li rel="4">Info</li>
   <li rel="5">Info</li>
   <li rel="6">Info</li>
</ul>
<ul id="column3">
   <li rel="7">Info</li>
   <li rel="8">Info</li>
   <li rel="9">Info</li>
</ul>

auch diese Elemente können sortiert werden. Wenn ich eine Liste von ihnen bekomme, möchte ich sie auch in der Reihenfolge behalten, in der sie von oben nach unten in jeder Spalte gefunden wurden.

Ich habe find (), parent () und ähnliches ausprobiert, vielleicht gehe ich falsch vor. Aber es ist immer noch erwähnenswert, eine Idee zu entwickeln

26
chris

Denkst du über so etwas nach?

$('ul li').each(function(i)
{
   $(this).attr('rel'); // This is your rel value
});
40
pixelfreak
var column1RelArray = [];
$('#column1 li').each(function(){
    column1RelArray.Push($(this).attr('rel'));
});

oder fp style

var column1RelArray = $('#column1 li').map(function(){ 
    return $(this).attr('rel'); 
});
14
Fresheyeball
$('li[rel=7]').siblings().andSelf();

// or:

$('li[rel=7]').parent().children();

Nachdem Sie diesen Kommentar hinzugefügt haben, der erklärt, dass Sie "ein Array von rels pro Spalte bilden" möchten, sollten Sie dies tun:

var rels = [];

$('ul').each(function() {
    var localRels = [];

    $(this).find('li').each(function(){
        localRels.Push( $(this).attr('rel') );
    });

    rels.Push(localRels);
});
5
Joseph Silber

html

<ul class="answerList" id="oneAnswer">
    <li class="answer" value="false">info1</li>
    <li class="answer" value="false">info2</li>
    <li class="answer" value="false">info3</li>
</ul>   

Holen Sie sich Index, Text, Wert js

    $('#oneAnswer li').each(function (i) {

        var index = $(this).index();
        var text = $(this).text();
        var value = $(this).attr('value');
        alert('Index is: ' + index + ' and text is ' + text + ' and Value ' + value);
    });
3
Ahmad Aghazadeh