2011-01-27 15 views
15

sto cercando di costruire un selettore jQuery dinamico con il seguente codice:utilizzando le variabili all'interno di un selettore jQuery

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

dove segment_3 è un valore che con successo recuperare dalla stringa URL, che, per esempio, potrebbe restituire il valore di "section_one"

Ma quando si tenta di creare la variabile num_children, questo riferimento non funziona. Come faccio a costruire il codice per costruire un riferimento dinamico? Grazie per qualsiasi aiuto.

+4

L'ID dell'elemento è davvero '{segment_3}'? Le parentesi graffe lo rendono invalido. – lonesomeday

+0

Il tuo section_id var non contiene realmente parentesi graffe quando lo usi? Ciò causerebbe un problema. – CalebHC

+0

la variabile {segment_3} è pre-analizzata dal framework (code_igniter) prima dell'esecuzione di javascript, quindi è solo una stringa. Ho scoperto che funziona davvero per fare questo: var num_children = $ ('# {segment_3} ul'). Ma ancora, supponendo che stavo dicendo qualcosa del genere: var section_id = 'section_1', il codice sopra sarebbe valido? Puoi costruire un selezionatore del genere? – mheavers

risposta

35

Assumendo var SECTION_ID = 'section_1' questo:

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

vi darà

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

e sì, questo è valido pure. Vi fornirà tutti gli elementi ul all'interno dell'elemento # section_1 (indipendentemente da quanto siano profondi). Probabilmente otterrai una serie di elementi e chiamare anche .children() su di esso. Dovrebbe funzionare tutto.

+0

Ore e ore di lotta con le virgolette finiscono nella tua risposta. Grazie! – viery365

0

Prova

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

I commenti sopra sono esatte ... la sintassi di base per un selettore id è $ (# itemID) ...

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

1

Fino a HTML 4.01 l'attributo id è molto limitato per quanto riguarda i personaggi valore consentito (regole di naming):

attributo id deve iniziare con una lettera az o AZ, seguito da: lettere (A-Za-z), cifre (0-9), trattini ("-"), caratteri di sottolineatura ("_"), due punti (":") e periodi (".") E tutti i valori sono case-sensitive.

* Nota: nella mia esperienza ho trovato utilizzando solo caratteri minuscoli e _ per id li rende molto chiara e si distinguono di selettori CSS (.something: pseudo-classe) *

D'altra parte in HTML5 puoi avere quasi tutto il valore dell'ID.

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

Così il vostro selettore è perfettamente bene (valido) con specifiche HTML5, ma per farlo funzionare con jQuery è necessario per sfuggire tutti i caratteri il parser di selezione usa con un significato speciale. E poiché il suo codice JavaScript, devi usare due \\ (il primo sfugge al secondo). JQuery non offre un modo per fare questo, quindi al di sotto è il codice che sto usando:

Esempio:

<?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 
    // !"#$%&'()*+,./:;[email protected][\]^`{|}~ 
    $(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> 

Ho modificato il codice, alcuni errori in caso di fissazione. :)