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

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

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

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

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

17
dynamic javascript jquery selector variables

4 ответов

предполагая, что VAR section_id = 'section_1' это:

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

даст вам 

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

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

36

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

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

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

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

Ref: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,'\');
        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>

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

1

попробовать

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

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

var myValue = $("#new_grouping_ " +i).функция val(); // это работает

0