0
votes

Comment obtenir la valeur de données de tous les éléments d'une chaîne

J'ai une quantité variante d'éléments regroupés dans différentes listes. L'utilisateur peut changer les éléments par glisser-déposer. Après chaque changement, j'ai besoin d'afficher une chaîne avec tous les articles et comment ils sont regroupés. La chaîne contient la valeur de données de l'élément, pas le texte.

Obtenir les articles Les valeurs de données n'étaient pas un problème, mais je ne savais pas comment continuer à construire la chaîne. P>

<input type="text" id="listOfItems">

<ul class="group">
    <li class="item" data-value="A">Item A</li>
    <li class="item" data-value="B">Item B</li>
    <li class="item" data-value="C">Item C</li>
</ul>
<ul class="group">
    <li class="item" data-value="D">Item D</li>
    <li class="item" data-value="E">Item E</li>
    <li class="item" data-value="F">Item F</li>
</ul>
<ul class="group">
    <li class="item" data-value="G">Item G</li>
    <li class="item" data-value="H">Item H</li>
    <li class="item" data-value="I">Item I</li>
</ul>

<script>
    $(".group").each(
        function (index) {
            $("li", this).data("value")
            //Next steps?
        }
    );
</script>

jquery

0 commentaires

3 Réponses :

0
votes

Utilisez .map code> deux fois, une fois sur chaque .group code> (pour mettre entre parenthèses autour de ses valeurs), et dans une personne imbriquée, sur chaque . / code>, pour obtenir la valeur de chacun:

p>



<input type="text" id="listOfItems">

<ul class="group">
    <li class="item" data-value="A">Item A</li>
    <li class="item" data-value="B">Item B</li>
    <li class="item" data-value="C">Item C</li>
</ul>
<ul class="group">
    <li class="item" data-value="D">Item D</li>
    <li class="item" data-value="E">Item E</li>
    <li class="item" data-value="F">Item F</li>
</ul>
<ul class="group">
    <li class="item" data-value="G">Item G</li>
    <li class="item" data-value="H">Item H</li>
    <li class="item" data-value="I">Item I</li>
</ul>

0 commentaires

0
votes

Ceci ignorera tout ULS vide

jQuery p>

<input type="text" id="listOfItems">

<ul class="group">
    <li class="item" data-value="A">Item A</li>
    <li class="item" data-value="B">Item B</li>
    <li class="item" data-value="C">Item C</li>
</ul>
<ul class="group">
</ul>
<ul class="group">
    <li class="item" data-value="G">Item G</li>
    <li class="item" data-value="H">Item H</li>
    <li class="item" data-value="I">Item I</li>
</ul>

0 commentaires

0
votes

Itéréter à travers chaque groupe et, à l'intérieur, itérale à travers tous les éléments Li code>. Obtenez un tableau d'élément dans chaque itération et générer une chaîne séparée par des virgules via array.join code>

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="listOfItems">

<ul class="group">
    <li class="item" data-value="A">Item A</li>
    <li class="item" data-value="B">Item B</li>
    <li class="item" data-value="C">Item C</li>
</ul>
<ul class="group">
    <li class="item" data-value="D">Item D</li>
    <li class="item" data-value="E">Item E</li>
    <li class="item" data-value="F">Item F</li>
</ul>
<ul class="group">
    <li class="item" data-value="G">Item G</li>
    <li class="item" data-value="H">Item H</li>
    <li class="item" data-value="I">Item I</li>
</ul>

1 commentaires

Notez que cela ajoutera A, (), si un groupe est vide