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

**Sanceray3** · 30/11/2009, 17h46

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 :

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

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>

**kimjoa** · 01/12/2009, 01h14

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 :

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

1
2
 
var length = document.getElementById('ul_projets').childNodes.length;

en jquery

Code :

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

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+

**Sanceray3** · 01/12/2009, 09h23

Impeccable, merci !

**danielhagnoul** · 01/12/2009, 20h37

Bonsoir.

Cela dépend de ce que l'on recherche, 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
 
<!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>

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

jQuery

Discussions similaires

Partager

Partager