javascript - Jquery隐藏div列表并以5个部分显示

Question

我自己有一个像这样的 html 页面

<div id="main">
    <div class="content">
        <p>Text</p>
    </div>
    <div class="content">
        <p>Text</p>
    </div>
    <div class="content">
        <p>Text</p>
    </div>
    <div class="content">
        <p>Text</p>
    </div>
    <div class="content">
        <p>Text</p>
    </div>
    <div class="content">
        <p>Text</p>
    </div>
    <div class="content">
        <p>Text</p>
    </div>
    <div class="content">
        <p>Text</p>
    </div>
</div>

所以我已经在我的文档准备功能中拥有了这个。

var sections = $(".content");
        for(var i = 0; i < sections.length; i+=5) {
            sections.slice(i, i+5).wrapAll("<div class='section-of-content'></div>");
        }

这会将我的 div 分开，并将它们包装在一个具有“内容部分”类的新 div 中，现在我想做的就是简单地显示第一个“内容部分”并隐藏所有其他内容，然后我将在底部有一个 anchor 标记，它是下一个和上一个，它将显示和隐藏其他“内容部分”。

我已经尝试过了

var contentSections = $(".section-of-content");
        for(var i = 0; i < contentSections.length; i++)
        {
            if(i == 0)
            { 
                contentSections [i].show();
            }
            else
            {
                contentSections [i].hide();
            }
        }

但是它指出一个函数未定义，它引用的是.show();谁能帮帮我吗？

Answer 1

你必须将 projectSections[i] 包装在 jquery 选择器中，因为 projectSections[i] 为你提供一个 javascript 元素而不是一个 jquery 对象，所以如果你像这样使用它:

var projectSections = $(".project-section");
for(var i = 0; i < projectSections.length; i++)
{
    if(i == 0)
    { 
        $(projectSections[i]).show();
    }
    else
    {
        $(projectSections[i]).hide();
    }
}

它工作起来没有问题。但我建议你改用这个:

$(".project-section").hide();
$(".project-section:first-child").show();

更实用。