伪类nth-of-type不适用于特定类

Question

我的HTML第一次看起来很完美,但如小提琴所示,当点击按钮时,我想隐藏/显示一些.show元素.当我隐藏它们时,CSS就会被破坏.我不知道我错过了什么.

HTML:

<div>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
</div>
<input type="button" id="button" value="click" />

CSS:

div .show:nth-of-type(-n+4) {
    margin-top:0;
}
div .show:nth-of-type(4n) {
    margin-right:0;
}

JS:

$("#button").click(function () {
    $("span:eq(0),span:eq(2)").toggle().toggleClass("show");
});

Jsfiddle在这里.

任何帮助,将不胜感激.

谢谢你的时间.

Answer 1

该:nth-of-type不会只计算.show元素,它会计算所有 spans.因此,当你隐藏其中的一些时,即使它们被隐藏,它们仍然是有价值的.

如果你要显示和隐藏跨度,nth-of-type可能不是你需要的.

我不是CSS向导.有两种选择:

1. 不要隐藏元素,detach然后再重新附加它们.然后他们不再在父母身边,:nth-of-type并将继续工作.请参阅下面的示例.

2. (我不喜欢这个,但是......)不要使用:nth-of-type,只要你显示/隐藏跨度,就可以使用你通过JavaScript分配的类(基本上是通过可见的类运行,并给它们提供你需要的类.)

这是一个做分离/重新连接的例子:小提琴

// Get the spans
var $spans = $("#container span");

// Assign them indexes
$spans.each(function(index) {
    this.setAttribute("data-index", index);
});

// Attach/detach on a toggle
var detached;

$("#button").click(function () {
    if (detached) {
        reattach(detached);
        detached = undefined;
    }
    else {
        detached = detach();
    }
});

function detach() {
    var rnd1, rnd2;

    // Pick two at random
    rnd1 = Math.floor(Math.random() * $spans.length);
    do {
        rnd2 = Math.floor(Math.random() * $spans.length);
    }
    while (rnd2 === rnd1);

    // Detach them
    return $("#container span:eq(" + rnd1 + "),span:eq(" + rnd2 + ")").detach();
}

function reattach(spans) {
    spans.each(function() {
        var $span = $(this),
            index = +$span.attr("data-index");
        if (index === 0) {
            $span.prependTo("#container");
        }
        else {
            $span.insertAfter($spans[index - 1]);
        }
    });
}

请注意,div包含跨度不是一个空文本节点作为其第一个孩子是很重要的(你的小提琴,我已经删除了它).那是因为当我们把跨度放回去时,因为我们总是按顺序执行它们,如果我们重新连接我们必须使用的第一个prependTo而不是insertAfter,并且文本节点会混乱.