Aide pour un selector en jquery

monarche
Javascript

Bonjour,

J'ai besoin de votre aide pour récupérer la valeur d'une span par jquery.
Voila mon schéma, (en mode simple)

<ol id="ol_section" class="section">
<li id="sectionsection1" class="sectionliste">Section **<span>1</span>** : <span>Présentation section...</span>
    <div id="cursus_section_1" style="display:none;">
    <ol id="ol_cours1" class="cours cours1">
        <li id="curcus_cours_1_1" class="coursliste">Cours <span>1</span> : <span class="trait_cours">**cours1-1**</span>
        </li>
        <li id="curcus_cours_1_2" class="coursliste">Cours <span>2</span> : <span class="trait_cours">**cours1-2**</span>
        </li>
   </ol>
   </div>
</li>
<li id="sectionsection2" class="sectionliste">Section **<span>2</span> **: <span>Présentation section...</span>
    <div id="cursus_section_2" style="display:none;">
    <ol id="ol_cours2" class="cours cours2">
        <li id="curcus_cours_2_1" class="coursliste">Cours <span>1</span> : <span class="trait_cours">**cours2-1**</span>
        </li>
        <li id="curcus_cours_2_2" class="coursliste">Cours <span>2</span> : <span class="trait_cours">**cours2-2**</span>
        </li>
    </ol>
    </div>
</li>
</ol>

Je voudrais svp avoir comme résultat la valeur des span en GRAS.
Voila ou j'en suis.

var resultat="";
$(".trait_cours").each(function(){
    resultat += $(this).text()+";"+$("li:parent.sectionliste span:first").text()+"|";
});
// resultat me retourne : cours1-1;1|cours1-2;1|cours2-1;1|cours2-2;1|
// normalement les valeurs cours2-1 et cours2-2 doivent avoir ;2 et non ;1

si vous avez une idée, un grand merci

11 réponses

monarche
Auteur
Réponse acceptée

Merci, c'est ok. j'ai trouvé

var resultat= [];
$(".trait_cours").each(function(){
    var self = $(this);
    var curent = self.parents('li.sectionliste');
    resultat.push(self.text() + ";" + curent.find('span:first').text());
});
var resultat = resultat.join('|');

Spécial thanks to betaWeb

betaWeb

Salut,

Essayes peut-être ceci :

var resultat= [];
$(".trait_cours").each(function(){
    var self = $(this);
    resultat.push(self.text() + ";" + self.prev('span').text());
});
var resultat = resultat.join('|');

Sinon, comment génères-tu ton HTML ? Car tu peux tout aussi bien rajouter un attribut "data" et le récupérer pour chaque item:

HTML:

<li id="curcus_cours_2_1" class="coursliste" data-item="**cours2-1**;1">Cours <span>1</span> : <span class="trait_cours">**cours2-1**</span></li>

JS:

var resultat= [];
$(".trait_cours").each(function(){
    resultat.push($(this).data('item'));
});
var resultat = resultat.join('|');

Tu me suis ? :)

monarche
Auteur

Merci de votre réponse betaWeb,
En faite, en gros j'ai besoin de retourner le nom de cours suivie de la section a quelle il appartient.
Selon mon exemple :
je dois avoir comme résultat cours1-1;1 et cours1-2;1 (qui appartient au section 1).
et cours2-1;2 et cours2-2 (qui appartient au section 2).
Votre solution me retourne la valeur du span qui contient le numéro du cours, alors que je veux le span qui contient le numéro de la section.

Merci en tout cas

!____

pour vous répondre, le fichier html, ce génère en dynamique (append).
puisque le but c'est que l'utilisateur crée autant de section que possible, et dans chaque section il crée autant de cours que possible aussi.
et moi je dois récupérer tout ça, et savoir quel cours appartient a quelle section ^^'

betaWeb

Et la seconde solution consistant à préciser le nom de cours suivie de la section a quelle il appartient directement dans un attribut "data" ?

monarche
Auteur

ca revient au même a mon avis, puisque au moment de création. je dois parcourir le DOM pour connaitre l'index du cours et de la section. pour lui affecter (index+1) avant la création.

betaWeb

Beh non pas forcément, comment crées-tu ce contenu ? En statique ? En dynamique ?

monarche
Auteur

Avant tout merci de votre implication.

via des bouttons (ajouter une section) et (ajouter un cours)

function addCours(id_section){
    var input = '...'; 
    $('#ol_cours'+id_section).append(input);
}

function addSection(){
        var input = ''; // ici input ajouter une section et un cours n1 dedant
        $('#ol_section').append(input);
    }
}
betaWeb

oui mais ça ne me dit pas comment est généré ton HTML :/

monarche
Auteur

c'est généré dynamiquement.

betaWeb

Mais encore ?? Sois plus précis. As-tu du code à fournir ?

monarche
Auteur

Ok. J'ai mieux, je t'es mis tout ca sur un domaine d'un client .. http://univertek.com/espace_test/