How to append
element in between list of parent elements for some specific condition

Question

I have a list of elements where i want to show max 5 elements and add show more button if total elements is more than 5. Show/Hide part is done but I am stuck to customize this list using jquery.

For Example here is a list of brands which having total 13 items.

<ul class="search-filter" id="attributeLevel1Facet">
   <li>brand1</li>
   <li>brand2</li>
   <li>brand3</li>
   <li>brand4</li>
   <li>brand5</li>
   <li>brand6</li>
   <li>brand7</li>
   <li>brand8</li>
   <li>brand9</li>
   <li>brand10</li>
   <li>brand11</li>
   <li>brand12</li>
   <li>brand13</li>
</ul>

I want to make this list like this using jquery only if total item is more than 5

<ul class="search-filter" id="attributeLevel1Facet">
   <li>brand1</li>
   <li>brand2</li>
   <li>brand3</li>
   <li>brand4</li>
   <li>brand5</li>
   <li class="search-opt hide">
      <ul class="search-opt">
       <li>brand6</li>
       <li>brand7</li>
       <li>brand8</li>
       <li>brand9</li>
       <li>brand10</li>
       <li>brand11</li>
       <li>brand12</li>
       <li>brand13</li>
      </ul>
    </li>         
</ul>
<c:if test="${fn:length(***) gt 5}">
    <a data-role="more-options" class="more-option" title="more-option">More Options</a>
</c:if>

I want to change the first list to second list using jquery if items > 5. If $("#attributeLevel1Facet > li").length > 5 then it should wrap it with another <ul><li> element and add more-option button (second list above).

Please help me.

possible duplicate of [jQuery wrap code after x number of elements](http://stackoverflow.com/questions/2485479/jquery-wrap-code-after-x-number-of-elements) — valar morghulis, Apr 08 '15 at 06:02

score 1 · Answer 1 · answered Apr 08 '15 at 06:01

1

You can check the length of the li elements and then create a new ul like

var $lis = $('#attributeLevel1Facet li');
if ($lis.length > 5) {
    var $ul = $('<ul class="search-opt"/>').append($lis.slice(5));
    $ul.wrap('<li class="search-opt hide" />').parent().appendTo('#attributeLevel1Facet')
}

Demo: Fiddle

answered Apr 08 '15 at 06:01

Arun P Johny

384,651
66
527
531

Can you please change your fiddle to add `More Options` as well at the end of
– Free-Minded Apr 08 '15 at 06:10
@ShreshttBhatt how should the upadated markup look like – Arun P Johny Apr 08 '15 at 06:12

score 1 · Accepted Answer · answered Apr 08 '15 at 06:09

1

You can use something like this,

$("#attributeLevel1Facet > li").filter(function() {
    return $(this).index() > 4;
}).wrapAll("<li class='search-opt hide'><ul class='search-opt'></ul></li>");

Fiddle

In the above code, filter will return the li elements whose index is greater than 4. Then you can wrap them with any elements.

answered Apr 08 '15 at 06:09

Anoop Joshi P

25,373
8
32
53

Your code seems to be very clean. Can you please change your fiddle to add More Options as well at the end of parent
– Free-Minded Apr 08 '15 at 06:16

score 0 · Answer 3 · edited May 23 '17 at 11:47

0

Check this -> jQuery load first 3 elements, click "load more" to display next 5 elements

From the answer i think you can get what you want

edited May 23 '17 at 11:47

Community

1
1

answered Apr 08 '15 at 06:00

Robin

854
8
20

score 0 · Answer 4 · answered Apr 08 '15 at 06:02

You can try something like this

if($('li').length > 5){
    var element='<li class="search-opt hide">'+
      '<ul class="search-opt">';
    $('li:nth-child(5)').after(element)
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul class="search-filter" id="attributeLevel1Facet">
   <li>brand1</li>
   <li>brand2</li>
   <li>brand3</li>
   <li>brand4</li>
   <li>brand5</li>
   <li>brand6</li>
   <li>brand7</li>
   <li>brand8</li>
   <li>brand9</li>
   <li>brand10</li>
   <li>brand11</li>
   <li>brand12</li>
   <li>brand13</li>
</ul>

How to append element in between list of parent elements for some specific condition

4 Answers4

How to append
element in between list of parent elements for some specific condition