Блог

Это мой код в файле jsp. Как я могу показать только 2 «статьи» после рендеринга страницы с возможностью нажать «показать больше»?

Основное отличие от другого вопроса заключается в том, что я хочу показать больше <div> блоков, но не <li> и прочее. И мне не удалось выполнить итерацию по целым блокам. 🙁

 <aui:form name="journalForm" id="journalForm">

    <c:forEach items="${articleModelList}" varStatus="counter"
        var="article">

        <div class="span3">

            <c:if test="${(counter.index % 3) == 0}">
                <div class="article animated fadeInLeft">
            </c:if>
            <c:if test="${(counter.index % 3) == 1}">
                <div class="article animated fadeInDown">
            </c:if>
            <c:if test="${(counter.index % 3) == 2}">
                <div class="article animated fadeInRight">
            </c:if>
            <div class="well">
                <h3>${article.articleName}</h3>
                <div class="article__content">
                    <div class="seo-header">Click to view content</div>
                    <div class="seo-content morecontent">
                        <p class="text-success">${article.articleContent}</p>
                    </div>
                </div>
            </div>
        </div>
</div>
</c:forEach>
</aui:form>
</div>

<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>
  

Я пришел к этому:

 $(document).ready(function() {
size_li = $("#myList .span3").size();
x = 2;
$("#myList .span3 .article").each(function(index, obj) {
    if (index < 2)
        $(obj).attr("display", "block");
});
  

Но это не работает. Я прочитал много документации, но безрезультатно.

Это своего рода волшебство, потому что я пытался решить его весь день и добился успеха через 2 минуты после публикации его здесь.

 $(document).ready(function() {
size_li = $("#myList .span3").size();
x = 2;
$("#myList .span3 .article").each(function(index, obj) {
    if (index < 3)
        $(obj).show();  });

});
  

и display: none в css файле.