web-dev-qa-db-fra.com

utilisation de variables dans un sélecteur JQuery

J'essaie de construire un sélecteur jquery dynamique avec le code suivant:

var section_id = "{segment_3}";
var num_children = $('#'+ section_id + ' ul').children().size();

où segment_3 est une valeur que j'ai extraite avec succès de la chaîne d'URL, qui pourrait par exemple renvoyer la valeur "section_one"

Mais lorsque vous essayez de créer la variable num_children, cette référence ne fonctionne pas. Comment est-ce que je construis le code pour construire une référence dynamique? Merci pour toute aide.

javascriptjqueryvariablesdynamicselector
17
mheavers

En supposant que var section_id = 'section_1' ceci:

$('#'+ section_id + ' ul').children().size();

te donnera 

$('#section_1 ul').children().size();

et oui, cela est valable aussi. Il vous donnera tous les éléments ul de l'élément # section_1 (quelle que soit leur profondeur). Vous obtiendrez probablement un tableau d'éléments et l'appel de .children () est également acceptable. Tout devrait fonctionner.

36
Kamil Sarna

Jusqu'en HTML 4.01, l'attribut id est très limité en ce qui concerne les caractères de valeur autorisés (règles de nommage):

l'attribut id doit commencer par une lettre , AZ ou z, suivie de: lettres (A-Za-z), chiffres (0-9), traits d'union ("-"), traits de soulignement ("_"), deux points (":") et points (".") et toutes les valeurs sont sensibles à la casse.

* remarque: d'après mon expérience, l'utilisation de caractères minuscules et _ pour les identifiants les rend très clairs et se démarque des sélecteurs CSS (.something: pseudo-class) *

En revanche, en HTML5, vous pouvez avoir presque n'importe quoi comme valeur id.

Réf: http://www.w3.org/TR/html5/elements.html#the-id-attribute

Donc, votre sélecteur convient parfaitement (valide) avec les spécifications HTML5, mais pour le faire fonctionner avec jQuery, vous devez échapper à tous les caractères que l'analyseur de sélecteur utilise avec une signification particulière. Et comme son code JavaScript, vous devez utiliser deux \\ (le premier échappe au second). JQuery ne vous offre pas le moyen de le faire. Vous trouverez ci-dessous le code que j'utilise:

Exemple:

<?xml version="1.0" encoding="UTF-8"?>
<!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="en" lang="en">
<head>
    <title>jQuery HTML5 Selector Escaping</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Ths is the list of special characters used by jquery selector parser
    // !"#$%&'()*+,./:;?@[\]^`{|}~
    $(document).ready(function() {
        var selector = '{my_%real{ly:s#tra`n[ge_i]d_n^@a|me>}';
        selector = selector.replace(/([ {}\|`\^@\?%#;&,.+*~\':"!^$[\]()=>|\/])/g,'\\$1');
        var object = $('#'+selector+' ul').children().size();
        alert('UL has '+ object +' LIs');
    });

    </script>
</head>
<body>
    <div id="{my_%real{ly:s#tra`n[ge_i]d_n^@a|me>}">
        <ul>
            <li>Sehr</li>
            <li>Gut</li>
            <li>Doh</li>
        </ul>
    </div>
</body>
</html>

J'ai édité le code, quelques erreurs ont été corrigées. :)

1
ludesign

Essayer

var num_children = $('#'+ section_id.substring(1, section_id.length-2) + ' ul').children().size();
0
Aliostad

Les commentaires ci-dessus sont corrects ... la syntaxe de base d'un sélecteur d'identifiant est $ (# itemID) ...

var myValue = $ ("# new_grouping _" + i) .val (); // cela marche

0
John K.