У меня есть такая структура:
<div id="main">
<div class="clear"></div>
<div class="search"></div>
<div class="scan"></div>
<div class="topbook"></div> <!--select this one-->
<div class="topbook"></div>
<div class="topbook"></div>
<div class="topbook"></div>
</div>
и я хочу использовать css псевдо-селектор, чтобы выбрать первый элемент .topbook
:
$("body .topbook:nth-of-type(1)").length // 0
но длина выбора dom равна нулю: http://jsfiddle.net/HGym3/
Однако, если я сменил тэг элемента head на p
:
<div id="main">
<p class="clear"></p>
<p class="search"></p>
<p class="scan"></p>
<div class="topbook"></div> <!--select this one-->
<div class="topbook"></div>
<div class="topbook"></div>
<div class="topbook"></div>
</div>
селектор мог бы работать: http://jsfiddle.net/HGym3/1/
Какая разница? Селектор nth-of-type
связан с типом тега?
Короткий ответ: вы совершенно правы. type
в nth-of-type
- это тег. Ссылка MDN.
Возможно, легкое исправление заключается в том, чтобы обернуть ваши .topbook
в другой div; это даст вам эффект, который вы ищете, без особых проблем.
<div id="main">
<div class="clear"></p>
<div class="search"></p>
<div class="scan"></p>
<div>
<div class="topbook"></div> <!--select this one-->
<div class="topbook"></div>
<div class="topbook"></div>
<div class="topbook"></div>
</div>
</div>
$('body .topbook')[index]