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

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

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

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

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

Ответ 1

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

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

предоставит вам

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

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

Ответ 2

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

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

* Примечание: по моему опыту я нашел использование только строчных символов и _ для id делает их очень ясными и выделяются из селекторов CSS (.something: pseudo-class) *

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

Ссылка: 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
    // !"#$%&'()*+,./:;[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>

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

Ответ 3

Try

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

Ответ 4

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

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