Question

我怎样才能只显示文章的第一部分.class1。我首先隐藏所有元素，只显示文章的第一部分，并显示类.class1。我想过:firstChild但我非常缺乏经验，我不知道如何解决这个问题。

<article class="x class1">
    <section>
        <p>1</p>
    </section>
    <section>
        <p>1</p>
    </section>
</article>
<article class="x class2">
    <section>
        <p>2</p>
    </section>
    <section>
        <p>2</p>
    </section>
</article>
<script type="text/javascript">

        $(document).ready(function () {

            $(".x").hide()

        });
</script>

Answer 1

像这样使用jquery的not：

$(".x").not(".class1").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="x class1">
    <section>
        <p>1</p>
    </section>
    <section>
        <p>1</p>
    </section>
</article>
<article class="x class2">
    <section>
        <p>2</p>
    </section>
    <section>
        <p>2</p>
    </section>
</article>

都能跟得上！要只显示class1元素的第一部分，你可以使用它：

$(".x section").not(":eq(0)").hide(); //hides all the section inside the .x class, except the first

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="x class1">
    <section>
        <p>1</p>
    </section>
    <section>
        <p>2</p>
    </section>
</article>
<article class="x class2">
    <section>
        <p>3</p>
    </section>
    <section>
        <p>4</p>
    </section>
</article>

谢谢@pawel！

Answer 2

看看这个example它应该可以帮到你。

你可以像你正在做的那样隐藏它们，只是先使用，就像你想要显示第一个一样。

Answer 3

仅限CSS：

article {
   display: none;
}

article[class*="class1"] {
   display: inherit;
}

article[class*="class1"] section:nth-child(2) {
    display: none;
}

Live example on the jsFiddle

<强>兼容性

IE7 +
火狐
铬
Safari浏览器
戏

Answer 4

你可以这样做：

$(".x:not(.class1)").hide();

JS Fiddle Demo

Answer 5

使用此：

$(document).ready(function () {

     $(".x > section").not(":first").hide();

});

Answer 6

在这个特定的引用中我会使用

$('article + article, section + section').hide();

它会隐藏每个<article>之后的<article>（所以不是第一个），与<section> s类似。

http://jsfiddle.net/ku5tnaeL/

显示文章的第一部分（HTML / JavaScript）

6 个答案:

JS Fiddle Demo