CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Johnathan Fidelio
Johnathan Fidelio

Reputation: 69

Select specific quantity of li in ul block

I have an ul-block in which there are 15 li positions.

First 5 li-s are pre-shown, another 10 are hidden. I have a function that toggles this UL - and if I click the button - it shows that 10 li-s but hides first 5.

I need such jQuery selector, so that the 5 first can be visible every time and not be toggling. This piece of code selects all of them

var ul = $(this).parent().attr('class');
 $('.'+ul+' li').toggle();

If there a way to select all except the first 5?

Upvotes: 3

Views: 200

Answers (4)

Master Yoda
Master Yoda

Reputation: 4402

There are a couple ways of doing this:

1) You can use the slice function

$("ul li").slice(5).hide();
$('button').click(function(e) {
  $("ul li").slice(5).toggle().addClass('redText');
  e.preventDefault();
})
.redText {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li> 5 </li>
  <li> 6 </li>
  <li> 7 </li>
  <li> 8 </li>
  <li> 9 </li>
  <li> 10 </li>
  <li> 11 </li>
  <li> 12 </li>
  <li> 13 </li>
  <li> 14 </li>
  <li> 15 </li>
</ul>
<button> click </button>

2) Or you can use the jQuery :gt() (greater than) selector

$("ul li:gt(4)").hide();
$('button').click(function(e) {
  $("ul li:gt(4)").toggle().addClass('redText');
  e.preventDefault();
})
.redText {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li> 5 </li>
  <li> 6 </li>
  <li> 7 </li>
  <li> 8 </li>
  <li> 9 </li>
  <li> 10 </li>
  <li> 11 </li>
  <li> 12 </li>
  <li> 13 </li>
  <li> 14 </li>
  <li> 15 </li>
</ul>
<button> click </button>

Final Update

Just an aside to your comment below this answer, I have added one final code snippet that should hopefully answer your question completely.

//your function to fade in li past index 5
$.fn.myFunc = function(ul, event) {
  $('.' + ul + ' li:gt(4)').fadeToggle("fast");
};

//Add a button to the ul
$('.list').append('<button type="button" id="updateButton">Button</button>');

//button click event
$('#updateButton').on("click", function(e) 
{
  e.preventDefault();
  var myParameter = $(this).parent().attr("class");
  $(this).myFunc(myParameter, e);
});
.listitem-green{
  color: green;
}

.listitem-red{
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
  <li class="listitem-green"> 1 </li>
  <li class="listitem-green"> 2 </li>
  <li class="listitem-green"> 3 </li>
  <li class="listitem-green"> 4 </li>
  <li class="listitem-green"> 5 </li>
  <li class="listitem-red"> 6 </li>
  <li class="listitem-red"> 7 </li>
  <li class="listitem-red"> 8 </li>
  <li class="listitem-red"> 9 </li>
  <li class="listitem-red"> 10 </li>
  <li class="listitem-red"> 11 </li>
  <li class="listitem-red"> 12 </li>
  <li class="listitem-red"> 13 </li>
  <li class="listitem-red"> 14 </li>
  <li class="listitem-red"> 15 </li>
</ul>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105863

Because of the CSS tag below the question, here is a full CSS snippet.

/* hide */
#tgl:checked ~ul li:nth-child(5) ~li, #tgl {display: none; }
/* update label text */
#tgl:checked~[for="tgl"]:after             {content:' More'}
#tgl~[for="tgl"]:after                     {content:' Less'}
/*style label, easy demo */
label {appearance:button;-moz-appearance:button; /* Firefox */-webkit-appearance:button; /* Safari and Chrome */
}
<input type="checkbox" id="tgl" checked/>
<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li> 5 </li>
  <li> 6 </li>
  <li> 7 </li>
  <li> 8 </li>
  <li> 9 </li>
  <li> 10 </li>
  <li> 11 </li>
  <li> 12 </li>
  <li> 13 </li>
  <li> 14 </li>
  <li> 15 </li>
</ul>
<label for="tgl"> Show </label>

styling is triggered via the input state and the selector :nth-child() ~

Switching style can be made from : input ~ul li:nth-child(5) ~ li {/*any style*/} or input:checked ~ul li:nth-child(5) ~ li {/*any other style when input checked*/}

Upvotes: 2

Stender
Stender

Reputation: 2492

Borrowing snippet to show it with a css selector instead of jQuery

$('ul > li:nth-of-type(n+6)').addClass('redText');
.redText
{
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li> 5 </li>
  <li> 6 </li>
  <li> 7 </li>
  <li> 8 </li>
  <li> 9 </li>
  <li> 10 </li>
  <li> 11 </li>
  <li> 12 </li>
  <li> 13 </li>
  <li> 14 </li>
  <li> 15 </li>
</ul>

Upvotes: 0

Milan Chheda
Milan Chheda

Reputation: 8249

You need to use :gt()

$(document).ready(function() {
  $(".ulClass li:gt(5)").hide();
  $('.clickMe').click(function() {
    $(".ulClass li:gt(5)").toggle();
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class='ulClass'>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
</ol>
<button class='clickMe'>Click me</button>

Upvotes: 0

Related Questions