Sélection de li difficile, pour moi en tout cas :)

**Thewil** · 29/07/2009, 16h21

Bonjour tout le monde,

Me revoilà pour un problème de sélection avec jQuery.
J'ai une structure de ce type la :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul id="idUL">
             <li id="motAEnleverLeVraiId1"></li>
             <li id="motAEnleverLeVraiId2"></li>
             <li id="motAEnleverLeVraiId3"></li>
             <li id="motAEnleverLeVraiId4"></li>
             <li id="motAEnleverLeVraiId5" style="display:none"></li>
             <li id="motAEnleverLeVraiId6" style="display:none">
          </ul>

En gros mon but est de récupérer tout les "LeVraiId" pour les li dont le display est différent de none et d'enlever "motAEnlever".
J'essaie mais je ne pense pas qu'en une seule ligne jQuery ce soit faisable ou en tout cas je ne sais pas faire. Donc j'attends vos idées. Je sens que Mr Hagnoul va encore devoir me sauver

Merci d'avance à tous

**BkD35** · 29/07/2009, 16h48

Alors de tête mais à vérifier :

Cette ligne te recupere tout les li qui contiennent 'LeVraiId' dans leur identifiant, et après fait un tri sur ceux caché.
$('li[id*=LeVraiId]').is(':hidden');

Après je n'ai pas très bien saisie ton principe du 'motAEnlever' peux tu être plus précis ?

**Thewil** · 29/07/2009, 16h53

Je vais essayer ta méthode en adaptant si besoin.

En gros mon id est égale à motasupprimerIDqueJeVeux.

Donc moi en gros je veux récupérer juste : IdQueJeVeux. Mais si j'arrive déjà à récupérer tout les ID des LI non masqué j'ai juste à faire une boucle avec un replace et ça sera bon.

**BkD35** · 29/07/2009, 16h56

Oui de tout façon tu seras obliger de boucler sur chaque element pour traiter tes ID :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 
$('li[id*=LeVraiId]').is(':hidden').each(function() {
   alert( $(this).attr('id').replace(...) );
})

**Thewil** · 29/07/2009, 17h15

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('li[id*=LeVraiId]:visible').each(function() {
   alert( $(this).attr('id').replace("motAEnlever", ""));
})

Voila ce qui marche car je veux récupérer ceux qui sont visibles

L'alert fonctionne et m'affiche bien juste les bouts d'ID que je veux mais quand je veux mettre ça dans un tableau pour avoir juste les bouts d'ID que je veux mais le tab m'enregistre tout les Objets LI et non les id comme me retourne l'alert :S

Je ne comprend pas trop du coup

**danielhagnoul** · 29/07/2009, 23h35

Bonsoir Thewil.

S.V.P., Daniel ou danielhagnoul suffit largement

Voici un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
        li.cache {
            display:none;
        }
        li.montre {
            display:block;
            width:400px;
            height:28px;
            margin:12px;
            padding:6px;
            font-family:"Courier New", Courier, monospace;
            font-size:2em;
            color:#0033CC;
            background-color:#CCCCCC;
            border:1px solid #666666;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
/*
En gros mon but est de récupérer tout les "LeVraiId" pour les li dont le display est différent de none et d'enlever "motAEnlever".
*/
        $(document).ready(function(){
            var s = [];
 
            $("#idUL li:visible").each(function(i,item){
                $(item).attr("id", item.id.replace(/^motAEnlever/g,''));
 
                s.push("<p>");
                    s.push("item = " + item + ", ");
                    s.push("item.id = " + item.id + ", ");
                    s.push("item.tagName = " + item.tagName + ", ");
                    s.push("$(item).text() = " + $(item).text());
                s.push("</p>");
            });
 
            $("#affiche").html(s.join(""));
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <ul id="idUL">
            <li id="motAEnleverLeVraiId1" class="montre">li motAEnleverLeVraiId1</li>
            <li id="motAEnleverLeVraiId2" class="montre">li motAEnleverLeVraiId2</li>
            <li id="motAEnleverLeVraiId3" class="montre">li motAEnleverLeVraiId3</li>
            <li id="motAEnleverLeVraiId4" class="montre">li motAEnleverLeVraiId4</li>
            <li id="motAEnleverLeVraiId5" class="cache">li motAEnleverLeVraiId5</li>
            <li id="motAEnleverLeVraiId6" class="cache">li motAEnleverLeVraiId6</li>
        </ul>
        <div id="affiche"></div>
    </div>
</body>
</html>

**Thewil** · 30/07/2009, 09h33

Encore une fois parfait Daniel

Juste un petit bémol peut-être dû à une mauvaise explication, je ne veux pas remplacer les id mais juste les récupérer sans "motAEnlever".

Donc la je récupère bien dans mon tableau tout les motAEnleverLeVraiId donc au pire je vais refaire une boucle après le traitement jQuery et ça devrai rouler même si je suppose que tout doit être faisable dans la boucle jQuery.

Merci

Résolu : Et bien tout simplement en faisant comme ça dans le each

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

s[i] = $(this).attr('id').replace("motAEnlever", "");

**danielhagnoul** · 30/07/2009, 10h26

Bonjour Thewil.

Et non c'est moi !

J'avais pourtant chaussé mes télescopes

et pris soin de reporter la question dans la page, juste avant la solution. Mais parfois rien n'y fait !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script type="text/javascript">
    /*
    En gros mon but est de récupérer tout les "LeVraiId" pour les li dont le display est différent de none et d'enlever "motAEnlever".
    */
    $(document).ready(function(){
        var s = [];
 
        $("#idUL li:visible").each(function(i,item){
            s.push("<p>");
                s.push("item = " + item + ", ");
                s.push("item.id = " + item.id.replace(/^motAEnlever/g,'') + ", ");
                s.push("item.tagName = " + item.tagName + ", ");
                s.push("$(item).text() = " + $(item).text());
            s.push("</p>");
        });
 
        $("#affiche").html(s.join(""));
    });        
</script>

**Thewil** · 30/07/2009, 11h42

Merci c'est nickel

Sélection de li difficile, pour moi en tout cas :)

jQuery

Discussions similaires

Partager

Partager