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-of-content”类的新div中，现在我想做的只是显示第一个“内容部分”并隐藏所有其他内容，然后我会在底部有一个锚标记，它是下一个和上一个，它将显示和隐藏另一个“内容部分”。

我试过这个

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();

它更实用。

Jquery隐藏div列表并在5节中显示

1 个答案: