Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.05.2014, 16:57
Новичок на форуме
Отправить личное сообщение для pashtetiprit Посмотреть профиль Найти все сообщения от pashtetiprit
 
Регистрация: 28.05.2014
Сообщений: 2

: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"
Ответить с цитированием
  #2 (permalink)  
Старый 28.05.2014, 17:00
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

$('div.b').eq(1);
Ответить с цитированием
  #3 (permalink)  
Старый 28.05.2014, 17:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

pashtetiprit,
$("div.b:eq(1)").html()
Ответить с цитированием
  #4 (permalink)  
Старый 28.05.2014, 17:31
Новичок на форуме
Отправить личное сообщение для pashtetiprit Посмотреть профиль Найти все сообщения от pashtetiprit
 
Регистрация: 28.05.2014
Сообщений: 2

спасибо, да всё работает

<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>
Ответить с цитированием
  #5 (permalink)  
Старый 28.05.2014, 19:21
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,475

pashtetiprit, вариант рони правильней.

В варианте от WorM32 ты получаешь все элементы по данному селектору, а потом из них выбираешь элемент с заданным номером.
В варианте от рони ты получаешь только нужный элемент.(теоретически, хз насколько это оптимизировано в jquery )
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 29.05.2014, 09:02
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Aetae,
http://jsperf.com/jquery-eq-method-v...seudo-selector


Последний раз редактировалось WorM32, 29.05.2014 в 09:09.
Ответить с цитированием
  #7 (permalink)  
Старый 29.05.2014, 11:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

здесь $("div.b") селектор стандартный будет использовано наитив querySelector -
$("div.b:eq(1)") здесь query затратит больше времени на парсинг нестандартного селектора
Ответить с цитированием
  #8 (permalink)  
Старый 29.05.2014, 12:04
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Сообщение от рони Посмотреть сообщение
здесь $("div.b") селектор стандартный будет использовано наитив querySelector -
$("div.b:eq(1)") здесь query затратит больше времени на парсинг нестандартного селектора
Здесь парсинг jquery не главная причина, хотя она тоже влияет, а то, что селекторы парсятся браузером справо налево и первым отработает поиск всех элементов только по псевдо-селектору. Это очень медленная операция.

ПС. Если в моем же примере написать $('.b').eq(1), то это будет работать еще быстрее, тк в данном случае jQuery (Sizzle) заюзает нативный getElementsByClassName;
Ответить с цитированием
  #9 (permalink)  
Старый 29.05.2014, 12:19
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,475

WorM32,
Не совсем корректный пример, на самом деле разница примерно в два раза.
Но таки да, потому я и написал, что теоретически. Вариант рони всё равно правильнее.)

P.S. Можно ещё div.b+div.b использовать - ещё быстрей, но только в данном случае.)
__________________
29375, 35

Последний раз редактировалось Aetae, 29.05.2014 в 12:28.
Ответить с цитированием
  #10 (permalink)  
Старый 29.05.2014, 12:26
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Сообщение от Aetae Посмотреть сообщение
WorM32,
Не совсем корректный пример, на самом деле разница примерно в два раза.
Пруф?

Сообщение от Aetae Посмотреть сообщение
Но таки да, потому я и написал, что теоретически. Вариант рони всё равно правильнее.)
С точки зрения браузера это неправильный вариант. Я выше объяснил почему.

Последний раз редактировалось WorM32, 29.05.2014 в 12:33.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно спроектировать приложение? Alex Danilov ExtJS 7 22.05.2012 19:00
extjs 4 mvc, разбираемся с model & store Lord Daedra ExtJS 1 18.08.2011 22:36
динамические списки Shaci jQuery 0 14.12.2009 15:03
Как правильно писать классы с использованием jQuery? Tpona jQuery 7 13.10.2009 15:16