Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre du Club
    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 :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>

  2. #2
    Membre confirmé
    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+

  3. #3
    Membre du Club
    Impeccable, merci !

  4. #4
    Rédacteur

    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>

###raw>template_hook.ano_emploi###