web-dev-qa-db-fra.com

jQuery Rechercher et répertorier tous les éléments LI dans un UL au sein d'un DIV spécifique

J'ai 3 colonnes d'UL chacune un conteneur UL dynamique qui peut avoir de 0 à 9 conteneurs LI (éventuellement plus). Tous mes éléments LI ont un attribut "rel" que j'essaie de trouver finalement cet attribut et de l'utiliser pour autre chose sur tous les éléments LI dans cette DIV parent. Je veux finalement en trouver plus en fonction de chacun, mais pas des moindres. Les idées comment je peux y arriver avec jQuery? Exemple:

<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>

ces éléments sont également tous triables. Donc, quand j'obtiens une liste d'entre eux, je veux aussi les garder dans l'ordre où ils ont été trouvés de haut en bas de chaque colonne.

J'ai essayé find (), parent () et similaire, peut-être que je l'aborde mal. Mais ça vaut quand même la peine d'être mentionné pour aider à trouver une idée

javascriptjqueryfindchildren
26
chris

Pensez-vous à quelque chose comme ça?

$('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'));
});

ou style fp

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

// or:

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

Maintenant que vous avez ajouté ce commentaire expliquant que vous voulez "former un tableau de rouleaux par colonne", vous devez faire ceci:

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>

Récupère l'index, le texte, la valeur 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