jQuery Each, Iterate from starting element? [duplicate] - javascript

This question already has answers here:
jQuery: How to use each starting at an index other than 0
(3 answers)
Closed 7 years ago.
Is it possible to start an each loop starting from a certain element instead of all the elements?
e.g. If i wanted to make items above "Item two" red. (I'm aware there's no need for an each loop to do that, this is just an example case)
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
$('li').each(function(){
$(this).css("color", "red");
});


You can check current item index and skip iteration:
$('li').each(function(){
if( $( this ).index() < 2 ) return true;
$(this).css("color", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>


You can use index property of .each function.
$('li').each(function(index) {
if (index > 1) {
$(this).css("color", "red");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>


This can be done as follows
$(document).ready(function(){
var lis = $('ul').children();
console.log($(lis).length);
for(var i = 1; i < 3; i++)
{
$(lis[i]).css("color", "red");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

Related

Hide items from two or more lists with the same class name

I've got two lists with the same class name which show only the first 4 items. When either of the 'more' button below them is clicked, I wish to reveal the rest of the items for both lists. This behaviour works fine. Only problem is that the following line: $('.feature-list li:gt(3)').hide(); shows the first 4 items for only the first list and not the second. Any way I can target both lists?
$('.feature-list li:gt(3)').hide();
$('.more-btn').click(function() {
$('.feature-list li:gt(3)').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>List 1</p>
<ul class="feature-list feature-p-list1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="more-btn">Show More</button>
<p>List 2</p>
<ul class="feature-list feature-p-list2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="more-btn">Show More</button>

You can use find method to find li under each list. Otherwise, it will all consider as a single array.
Bonus:
Fixed the problem on clicking the Show more button for individual lists. Cheer!
$('.feature-list').find('li:gt(3)').hide()
$('.more-btn').click(function() {
$(this).parent().find('.feature-list li:gt(3)').show();
//$('.feature-list li:gt(3)').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<p>List 1</p>
<ul class="feature-list feature-p-list1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="more-btn">Show More</button>
</section>
<section>
<p>List 2</p>
<ul class="feature-list feature-p-list2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="more-btn">Show More</button>
</section>

Target multiple lists in jquery

I have three lists with the same class names. On load, I only show 5 list items per list and there are "show more" buttons which reveals the rest of the list items when clicked.
I want the behaviour such that, when the 'show more" button is pressed for one list, it also shows the hidden list items for the other lists.
My predicament is that the 3 lists behave like 1 big list and show the list items sequentially, instead of showing all the items for all lists together.
Any idea how I can get all the lists to behave in unison?
$(document).ready(function(){
var list = $(".list li");
var numToShow = 5;
var button = $(".next");
var numInList = list.length;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function(){
var showing = list.filter(':visible').length;
list.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = list.filter(':visible').length;
if (nowShowing >= numInList) {
button.hide();
}
});
});
.list {
padding: 0;
margin: 0;
}
.list li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1> LIst 1</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
<h1> LIst 2</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
<h1> LIst 3</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
</div>

You must treat the lists separately, like this:
$(document).ready(function(){
var $list = $(".list");
var numToShow = 5;
var $buttons = $(".next");
$buttons.hide();
$list.each(function() {
var $listItems = $(this).find("li");
var $button = $(this).next('.next');
var numInList = $listItems.length;
$listItems.hide();
if (numInList > numToShow) {
$button.show();
}
$listItems.slice(0, numToShow).show();
})
$buttons.click(function(){
var $this = $(this);
var $list = $this.prev(".list");
var $listItems = $list.find("li");
var showing = $listItems.filter(':visible').length;
$listItems.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = $listItems.filter(':visible').length;
var numInList = $listItems.length;
if (nowShowing >= numInList) {
$this.hide();
}
});
});
.list {
padding: 0;
margin: 0;
}
.list li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1> LIst 1</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
<h1> LIst 2</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
<h1> LIst 3</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
</div>

As already mentioned by Pedro, the problem with your code is that you select all the li elements at once, no matter which list they belong to.
You should iterate through lists and work with their items separetely.
And if you want behaviour such that, when the 'show more' button is pressed for one list, it also shows the hidden list items for the other lists, you need to iterate through lists on each button click too and show a needed number of items for each of lists.
$(document).ready(function(){
var numToShow = 3;
$(".list").each(function(i, list) {
var li = $(list).find("li");
var numInList = li.length;
li.hide();
if (numInList > numToShow) {
$(list).next(".next").show();
}
li.slice(0, numToShow).show();
});
$(".next").click(function() {
$(".list").each(function(i, list) {
var li = $(list).find("li");
var numInList = li.length;
var showing = li.filter(':visible').length;
li.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = li.filter(':visible').length;
if (nowShowing >= numInList) {
$(list).next(".next").hide();
}
});
});
});
.list {
padding: 0;
margin: 0;
}
.list li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1> List 1</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<button class="next">Show More</button>
<h1> List 2</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
<button class="next">Show More</button>
<h1> List 3</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
<button class="next">Show More</button>
</div>

Find first next element and then stop the search

How can use I jQuery to select the first element coming after (not immediate) a specific element? I have this list.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="tr current">Item 3</li>
<li>Item 4</li>
<li class="tr">Item 5</li>
<li>Item 6</li>
<li class="tr">Item 7</li>
<li>Item 8</li>
</ul>
How can I select/manipulate the first coming tr (Item 5) using tr current (Item 3) using jQuery? I have tried this.
// This apply background color to the next immediate (Item 4) as its definition.
$('.tr.current').next().css('background-color', '#000');
// This apply to background color all next Items
$('.tr.current').nextAll().css('background-color', '#000');
// This apply to background color all next Items with class tr (Item 5, Item 7)
$('.tr.current').next('.tr').css('background-color', '#000');

use .nextAll() with :first selector:
$('.tr.current').nextAll('.tr:first').css('background-color', '#000');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="tr current">Item 3</li>
<li>Item 4</li>
<li class="tr">Item 5</li>
<li>Item 6</li>
<li class="tr">Item 7</li>
<li>Item 8</li>
</ul>

How to remove nested UL element but keep child elements

I wish to remove the <ul> tags for a nested list and then add its child <li> elements to the parent <ul> element. For example :
<ul>
<li>Item 1</li>
<ul>
<li>Item 2</li>
</ul>
<li>Item 3</li>
</ul>
Should become :
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
I am new to jQuery and what I have created so far is not working and I am not sure why:
$content.find('ul').each(function() {
if ($(this).parent().is('li')) {
var elements = $(this).children().detach();
var closest = $(this).closest('li');
$(this).remove();
elements.appendTo(closest);
}
}
Any help much appreciated.

use .unwrap()
DEMO or DEMO
$('ul > ul > li').unwrap('ul');

try
var elements = [];
$('ul.outer li').each(function(){
elements.push(this);
});
$('ul.outer').html('');
for(x in elements){
$('ul.outer').append($(elements[x])[0].outerHTML);
}
if you need it to work for .. multiple levels deep .. for example
<ul class="outer">
<li>Item 1</li>
<ul>
<li>Item 2</li>
<ul>
<li>Item 2</li>
</ul>
</ul>
<li>Item 3</li>
</ul>

How to append li inside new div

I have a HTML markup like this:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
How can I convert above HTML into this:
<div class="main"><ul><li>Item 1</li><li>Item 2</li></ul></div>
<div class="main"><ul><li>Item 3</li><li>Item 4</li></ul></div>
<div class="main"><ul><li>Item 5</li><li>Item 6</li></ul></div>
<div class="main"><ul><li>Item 7</li><li>Item 8</li></ul></div>

You can do like this:
$('ul > li:nth-child(2n-1)').each(function() {
$(this).next().add(this).wrapAll('<div class="main"><ul></ul></div>');
}).eq(0).closest('div').unwrap();
Working Demo

Categories