Использование переменных в селекторе 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();//это работает