列表和第n个孩子 [英] Lists and nth-child

问题描述

我有一个关于列表和使用nth-child的问题。

I have a question related to lists and the use of nth-child.

我有一个选择器定位的两个列表，并且我试图访问单个元素。

I have two lists targetted by a selector, and am trying to access individual elements.

在我的Fiddle例子中，我预计第五个项目是黄色而不是青色。

In my Fiddle exemple, I expected the 5th item to be yellow not cyan.

    ul li:nth-child(5){
            background-color: yellow;
    }   

---

---

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>

    </ul>

    <ul>
        <li>a</li>
        <li>b</li>
    </ul>   

https://jsfiddle.net/1q66hwgg/

谢谢！
S。

Thanks! S.

推荐答案

你的小提琴正像你想要的一样工作。这个问题：

Your fiddle is working like you want. This question:

当选择器定位多个列表时，是否不能合并到一个列表中？

When a selector targets multiple lists, are they not combined into one list?

答案是NO。两个列表是独立的，如果您定位 ul li ，则您选择 ul的所有 li 但不组合。

The answer is NO. Two lists are independent and if you target ul li you are selecting all li of all ul but not combined.

为了合并多个 ul ，您需要删除每个 ul 除了最后一个，并且每个 ul 的开头除外。

In order to combine more than one ul you need to remove dinamically the end of every ul except the last, and the start of every ul except the first.

我制作了一个javascript来帮助你将 ul

I made a fiddle with a piece of javascript that helps you to combine all ul

https://jsfiddle.net/1q66hwgg/2/

代码：

var arrLi = [];
$('ul').each(function() {
    $(this).find('li').each(function() {
        arrLi.push($(this).html());
    });
    $(this).remove();
});
var ul = $('<ul></ul>').attr({id:"ulid"}).appendTo("#wrap");
for(var i in arrLi) {
    var li =$('<li>'+arrLi[i]+'</li>');
    li.appendTo(ul);
}

这篇关于列表和第n个孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！