à propos de la méthode has()

**piotrr** · 13/07/2009, 14h16

J'ai une liste :

1

1.1
- 1.1.1
- 1.1.2
1.2

2
3

Je veux sélectionner tous mes li qui ont des descendants à partir du ul de plus haut niveau.

Je fais donc :

Code :

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

1
2
 
$(this).find("li:has(ul)")

Seulement dans cet exemple il me sélectionne aussi les niveaux "1.2", "1.1.1" et "1.1.2" alors qu'il ne devrait pas puisqu'ils ne contiennent pas de ul.

**danielhagnoul** · 14/07/2009, 01h17

Bonsoir.

Le find() est correct.
Si vous affichez le text() ou le html() de l'élément il donne logiquement la totalité de son contenu et c'est ainsi que la recherche vous parait fausse, voir 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
 
<!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;
        }
    </style>
    <!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var objs = $("ul#monUL").find("li:has(ul)");
 
            $.each(objs, function(i,item){
                console.log("item[" + i + "] = " + item);
                console.log("item[" + i + "] id = " + item.id);
                console.log("item[" + i + "] texte = " + $(item).text());
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <ul id="monUL">
            <li id="li1">
                li 1
                <ul>
                    <li id="li11">
                        li 1.1
                        <ul>
                            <li>li 1.1.1</li>
                            <li>li 1.1.2</li>
                        </ul>
                    </li>
                    <li>li 1.2</li>
                </ul>
            </li>
            <li>li 2</li>
            <li>li 3</li>
        </ul>
        <div id="affiche"></div>
    </div>
</body>
</html>

à propos de la méthode has()

jQuery

Discussions similaires

Partager

Partager