использование переменных в селекторе jquery - PullRequest
Новая
       18

использование переменных в селекторе jquery

17 голосов
/ 28 января 2011

Я пытаюсь создать динамический селектор jquery со следующим кодом: 

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

, где сегмент_3 - это значение, которое я успешно извлекаю из строки URL-адреса, которая, например, может возвращать значение"section_one"

Но при попытке создать переменную num_children эта ссылка не работает.Как мне построить код для построения динамической ссылки?Спасибо за любую помощь.

Ответы [ 4 ]

36 голосов
/ 28 января 2011

Предполагая, что var section_id = 'section_1' this: 

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

даст вам 

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

и да, это также верно.Это даст вам все элементы ul в элементе # section_1 (независимо от того, насколько глубокими они будут).Возможно, вы получите массив элементов, и вызов .children () для него тоже подойдет.Все должно работать.

1 голос
/ 28 января 2011

До HTML 4.01 атрибут id очень ограничен в отношении символов допустимого значения (правила именования):

атрибут id должен начинаться с буквы AZ или az, за которой следуют: буквы (A-Za-z), цифры (0-9), дефисы ("-"), подчеркивания ("_"), двоеточия (":") и точки (".") И все значения чувствительны к регистру.

* примечание: по своему опыту я обнаружил, что использование только строчных букв и _ для идентификаторов делает их очень четкими, и они выделяются из селекторов CSS (.something: псевдокласс) *

Вкл.С другой стороны, в HTML5 в качестве значения идентификатора может быть почти все.

Ссылка: http://www.w3.org/TR/html5/elements.html#the-id-attribute

Таким образом, ваш селектор идеально подходит (действителен) со спецификациями HTML5, но для того, чтобы получить его вДля работы с jQuery вам необходимо экранировать все символы, которые использует синтаксический анализатор со специальным значением.И поскольку это код JavaScript, вы должны использовать два \\ (первый экранирует второй).JQuery не предлагает вам способа сделать это, поэтому ниже приведен код, который я использую:

Пример: 

<?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>

Я редактировал код, несколько ошибок исправлены.:)

0 голосов
/ 28 января 2011

Комментарии выше верны ... основной синтаксис для селектора идентификаторов: $ (# itemID) ...

var myValue = $ ("# new_grouping _" + i) .val ();// это работает

0 голосов
/ 28 января 2011

Попробуйте 

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