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

Version imprimable

Bonjour tout le monde,

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

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

29/07/2009, 16h48
BkD35

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 ? :)
29/07/2009, 16h53
Thewil

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.

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

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

29/07/2009, 17h15
Thewil
Code:

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

Bonsoir Thewil.

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

Voici un exemple :

Code:

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>

30/07/2009, 09h33
Thewil

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[i] = $(this).attr('id').replace("motAEnlever", "");

Bonjour Thewil.

Et non c'est moi ! :oops:

J'avais pourtant chaussé mes télescopes :calim2: et pris soin de reporter la question dans la page, juste avant la solution. Mais parfois rien n'y fait ! :aie:

Code:

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>

30/07/2009, 11h42
Thewil

Merci c'est nickel :ccool: