#jquery #selector
#jquery #селектор
Вопрос:
Учитывая следующий код, я бы ожидал оповещения «searchRes1», которое является прямым совпадением идентификатора, а для второго блока я бы ожидал, что он также предупредит два других div, поскольку id содержит «поиск». Чего я не понимаю?
<div id="sRes">
<h4>Search for things</h4>
<div id="searchRes1">123</div>
<div id="searchRes2">456</div>
<div id="searchRes3">789</div>
</div>
<script>
$("#sRes div[id='searchRes1']").each(function () {
alert($(this).attr("id"));
});
$("#sRes div[id~='search']").each(function() {
alert($(this).attr("id"));
});
</script>
Комментарии:
1. о чем он предупреждает во втором селекторе?
Ответ №1:
В селекторах CSS содержит ( ~= ) означает содержит полное слово. Это может быть полезно для таких вещей, как rel="foo bar" которые были бы сопоставлены с rel~='foo' , rel~='bar' но не rel~='fo' .
Попробуйте с помощью StartsWith ( ^= ):
$("#sRes div[id^='search']")
Комментарии:
1. Хорошо, это работает … мне следовало бы более внимательно прочитать документацию, поскольку в ней явно указано: Этот селектор сопоставляет тестовую строку с каждым словом в значении атрибута, где «слово» определяется как строка, разделенная пробелом. Селектор совпадает, если тестовая строка в точности равна любому из слов. Ошибка пользователя из-за сбоя. Спасибо!
Ответ №2:
у меня первый работает нормально http://jsfiddle.net/raW26 /
И для того, чтобы сработал второй, я думаю, что атрибут, который вы выбираете, должен быть разделен пробелами
Для его работы необходимо использовать *= or ^=
P.S. вам не нужно использовать, достаточно $(this).attr("id") просто this.id
$("#sRes div[id='searchRes1']").each(function () {
alert($(this).attr("id"));
});
$("#sRes div[id*='search']").each(function() {
alert($(this).attr("id"));
});
Ответ №3:
вы пропускаете имя, а также используете ! не ~
$("#sRes div[id!='searchRes1']").each(function() {
alert($(this).attr("id"));
});