Comment connaitre le nombre d'éléments enfants ?

Bonjour à tous,

Voilà je vous explique mon souhait. J’aimerais pouvoir compter le nombre d’éléments enfants d’un <ul>. Existe-t-il une fonction jQuery qui permette de compter le nombre de childs d’un élément ?

Par avance merci de vos réponses.
Code:

1 2 3 4 5 6 7 <ul id="ul_projets"> <li>valeur 1</li> <li>valeur 2</li> <li>valeur 3</li> <li>valeur 4</li> </ul>

pas besoin de jquery pour ca. jquery est un framework, mais pour développer avec il faut connaitre au moins les base du javascript ...

en pure js on ferait
Code:

1 2 var length = document.getElementById('ul_projets').childNodes.length;
en jquery
Code:

1 2 var length = $('#ul_projets > *').length;
y a peux être plus simple avec jquery je suis pas spécialiste, mais quoi qu'il en soit si tu veux récupérer juste le nombre d'enfant d'un élément, utilise la méthode pure javascript, qui est beaucoup plus rapide

a+

Impeccable, merci !

Bonsoir.

Cela dépend de ce que l'on recherche, 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
 
<!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:#FFFFFF;
            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;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var v1 = $("#ul_projets > *").length;
            var v2 = $("#ul_projets li").length;
            var v3 = $("#ul_projets ul").length;
            var v4 = $("#ul_projets").children().length;
 
            $("#conteneur").append("<p>* length = " + v1 +
                                   "<br/>children length = " + v4 +
                                   "<br/>li length = " + v2 +
                                   "<br/>ul length = " + v3);
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <ul id="ul_projets">
            <li>
                valeur 1
                <ul>
                    <li>s1</li>
                    <li>
                        s2
                        <ul>
                            <li>s21</li>
                            <li>s22</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>valeur 2</li>
            <li>valeur 3</li>
            <li>valeur 4</li>
        </ul>
    </div>
</body>
</html>