возникли проблемы с выбором дочернего элемента с помощью jQuery

Question

У меня есть несколько вложенных элементов как таковых:

<div id="knownID">
 <div class="knownClass">
   <span>
     <nobr>
       <span class="knownClass2">
         <span> ... </span>       <--- this keeps expanding deeper and deeper
         <span></span>            <--- this is the one I need!!!
       </span>
     </nobr>
   </span>
 </div>
</div>

Я пытаюсь выбрать это, выполнив ...

$('#knownID span.knownClass2 span:nth-child(2)').html();

... но это не работает.Как мне выбрать 2nd <span> внутри <span> с помощью class="knownClass2"?Я также пытался ...

$('#knownID > span.knownClass2 span:nth-child(2)').html();

... но он возвращает ноль.Думаю, я не очень хорошо знаю, как работает селектор nth-child () в jQuery.Кто-нибудь может объяснить, как это работает, и предложить возможное решение моей проблемы?

Спасибо, Христо

Answer 1

Возможно, вы захотите попробовать:

$("#knownID span.knownClass2 > span:nth-child(2)").html();

Это выглядит так: Найти 2-го потомка типа span непосредственно под span, класс которого «knownClass2», который вложен где-то внутри элемента, идентификатор которого «knownId".

Документацию можно найти здесь:

http://api.jquery.com/category/selectors/

PS: Здесь также доступно контекстное решение:

$(" > span:eq(1)", "span.knownClass2", "div#knownID").html();

Answer 2

Это прекрасно работает для меня:

$("#knownID .knownClass .knownClass2 span:nth-child(2)")

См. JSBin здесь: http://jsbin.com/opoji3/edit

Может быть, у вас есть ошибка в другом месте?

Answer 3

Вы можете попробовать это:

$('#knownID')
    .children('div.knownClass')
    .children('span')
    .children('nobr')
    .children('span.knownClass2')
    .children('span:first')
    .next()
    .html();

Использование таких явных функций быстрее, чем объединение их всех в одну строку, как вы уже сделали. Это потому, что механизм выбора jQuery работает справа налево. Использование таких функций сначала приведет к обнаружению элемента ID, а затем к тому месту, где вы хотите быть.

Почему функции быстрее
JQuery использует Sizzle Selector Engine . Этот механизм удивителен, но следует отметить, что он работает справа налево в запросе селектора. Что это значит? Взять, к примеру, этот фрагмент jQuery:

$('#foo a.bar');

Sizzle сначала найдет каждый якорь на странице, имеющий класс bar, а затем проверит каждый из них, чтобы узнать, является ли он предком элемента с идентификатором foo. Это не оптимизировано, особенно если на странице много якорных тегов. Sizzle должен сделать это таким образом, потому что он не знает явно, что вы собираетесь найти.

Это, однако:

$('#foo').children('a.bar');

Сначала найдет элемент с идентификатором foo, а затем перейдет на один уровень вниз к якорям с классом bar. Это намного быстрее. Вы можете сказать jQuery сделать это, потому что у вас есть предвидение вашей структуры DOM.

Answer 4

Используйте селектор : eq () , который получает n-й элемент в объекте jQuery.Список проиндексирован нулями.

$("div#knownID span.knownclass2 span:eq(1)").html()

Вот демоверсия http://www.jsfiddle.net/96RyH/1/

Answer 5

Вы можете сделать это:

$("span.KnownClass2").children(":last").html();

Answer 6

Вы должны иметь > между knownClass2 и nth-child, например:

$('#knownID  span.knownClass2 > span:nth-child(2)').html();