Как выбрать первые совпадения для данного селектора по набору элементов?
Например, предположим, у меня есть следующий HTML:
<ul>
<li>foo</li>
<li>bar</li>
<li class="interesting">red</li>
<li class="interesting">yellow</li>
<li class="interesting">blue</li>
</ul>
<ul>
<li>eggs</li>
<li>spam</li>
<li class="interesting">circle</li>
<li class="interesting">square</li>
<li class="interesting">triangle</li>
</ul>
<ul>
<li>tofu</li>
<li>bacon</li>
<li class="interesting">circle</li>
<li class="interesting">square</li>
<li class="interesting">triangle</li>
</ul>
Я хочу, чтобы селектор извлекал первый .interesting элемент для каждого ul.
Так что в этом случае:
$("ul .interesting:magic-selector");
Будет соответствовать следующему:
<li class="interesting">one</li>
<li class="interesting">red</li>
<li class="interesting">circle</li>
После испытания первого ребенка (был Хмммм ...)
Я пробую селектор :first-child, и он не работает, по крайней мере, в Chrome.
Вот пример кода:
<ul>
<li>foo</li>
<li>bar</li>
<li class="interesting">red</li>
<li class="interesting">yellow</li>
<li class="interesting">blue</li>
</ul>
<ul>
<li>eggs</li>
<li>spam</li>
<li class="interesting">circle</li>
<li class="interesting">square</li>
<li class="interesting">triangle</li>
</ul>
<ul>
<li>tofu</li>
<li>bacon</li>
<li class="interesting">circle</li>
<li class="interesting">square</li>
<li class="interesting">triangle</li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$("ul .interesting:first-child").css('color', 'red'); // nothing happens
// maybe I have the order wrong? only:
$("ul .interesting :first-child").css('color', 'orange'); // nothing happens
$("ul :first-child.interesting ").css('color', 'yellow'); // nothing happens
$("ul :first-child .interesting ").css('color', 'green'); // nothing happens
$("ul :first-child").css('color', 'gray'); // the control; it turns foo, eggs, and tofu gray
});
</script>
Похоже, что first-child работает только для выбора первого дочернего элемента родительского элемента, а не первого соответствующего селектора родительского элемента.
За исключением этого, я полагаю, мне придется сделать что-то вроде:
$("ul").each(function () {
$(this).find(".interesting:first")…
});