| WorM32 | 29.05.2014 09:02 |
:nth-of-type не правильно обрабатывает классы
Добрый день, форумчане.
Задача такая - получить 2-й <div> к классом "b" Вот код, в примечаниях описывается сама проблема: <div class="a">1</div> <div class="a">2</div> <div class="b">3</div> <div class="b">4</div>
<script>
alert($("div:nth-of-type(2)").html());//2
alert($("div:nth-of-type(4)").html());//4
alert($("div.a:nth-of-type(2)").html());//2
alert($("div.b:nth-of-type(2)").html());//ничего, хотя по идее должно быть 4 (!!!)
alert($("div.b:nth-of-type(4)").html());//4, хотя у меня на странице всего 2 элемента класса "b", почему он берёт иерархию всего body вместо того, чтобы брать только элементу нужного класса?
</script>
читал на хабре различия между :nth-child и :nth-of-type http://habrahabr.ru/post/119139/, там описывалось что jQuery прекратил поддержку :nth-of-type, для совместимости есть плагин, но он не помогает. Если задачу нельзя решить этим способом - буду рад подсказке как решить её иначе. Ещё раз повторю: Задача такая - получить 2-й <div> к классом "b" |
$('div.b').eq(1);
|
pashtetiprit,
$("div.b:eq(1)").html()
|
спасибо, да всё работает
<script>
alert($("div.a").eq(0).html());//1
alert($("div.a").eq(1).html());//2
alert($("div.b").eq(0).html());//3
alert($("div.b").eq(1).html());//4
</script>
|
pashtetiprit, вариант рони правильней.
В варианте от WorM32 ты получаешь все элементы по данному селектору, а потом из них выбираешь элемент с заданным номером. В варианте от рони ты получаешь только нужный элемент.(теоретически, хз насколько это оптимизировано в jquery :)) |
|
здесь $("div.b") селектор стандартный будет использовано наитив querySelector -
$("div.b:eq(1)") здесь query затратит больше времени на парсинг нестандартного селектора |
Цитата:
ПС. Если в моем же примере написать $('.b').eq(1), то это будет работать еще быстрее, тк в данном случае jQuery (Sizzle) заюзает нативный getElementsByClassName; |
WorM32,
Не совсем корректный пример, на самом деле разница примерно в два раза. Но таки да, потому я и написал, что теоретически. Вариант рони всё равно правильнее.) P.S. Можно ещё div.b+div.b использовать - ещё быстрей, но только в данном случае.) |
Цитата:
Цитата:
|
http://jsperf.com/jquery-eq-method-v...udo-selector/6
WorM32, он правильный с точки зрения логики и абстракции. То что он работает медленнее - вопрос реализации в jquery. |
Цитата:
|
Sweet,
Нет. Если смотреть абстрактно: $("div.b").eq(1) - взять все элементы с классом "div.b", вернуть второй из них. $("div.b:eq(1)") - взять элемент имеющий класс "div.b" и идущий вторым. Соответственно второе должно выполнятся как минимум не медленнее первого. Почему же реальность так несовершенна - вопрос к авторам jq.) |
Цитата:
Цитата:
А вот с точки зрения браузера, если бы это был нативный селектор, ваше определение в корне неправильное. Определение в таком случае должно было быть такое: "Выбрать все элементы идущие вторыми. Из этих элементов выбрать с классом b и тегом div". |
Мде. А ничего что мы работаем с абстракциями? Внутренняя кухня должна оптимизироваться и подстраиваться под логику человека, а никак не наоборот. Выбор одного элемента должен быть быстрее выбора всех. Как это достигается - меня не волнует.
|
Цитата:
Цитата:
Посоны, вы просто холиварите. Это одно и тоже:
$("div.b").eq(1)
$("div.b:eq(1)")
$("div.b").find(":eq(1)")
$(":eq(1)", "div.b")
|
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var time1 = new Date()
for (var i = 0; i < 1000; i++) {
$("div.b:eq(1)").html()
}
time1 = ((new Date()).getTime() - time1.getTime());
var time2 = new Date()
for (var i = 0; i < 1000; i++) {
$('div.b').eq(1).html()
}
time2 = ((new Date()).getTime() - time2.getTime());
var time3 = new Date()
for (var i = 0; i < 1000; i++) {
$("div.b").find(":eq(1)").html()
}
time3 = ((new Date()).getTime() - time3.getTime());
var time4 = new Date()
for (var i = 0; i < 1000; i++) {
$(":eq(1)", "div.b").html()
}
time4 = ((new Date()).getTime() - time4.getTime());
alert([time1, time2, time3, time4])
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 18:13. |
