Revert list to previous order after prependTo using Jquery - javascript

I have a list which shows only four (featured) list items initially, and once a 'show more' button is clicked, it reveals the remainder of the list. I use$('.featured').prependTo('.feature-list'); to display the featured items first. However, when I click the 'show more' button, I want the list to be displayed in the original order before the prependTo happened. I can't seem to figure out how to do this.
$('.featured').prependTo('.feature-list');
$('.feature-list').find('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 class="featured">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li class="featured">Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li class="featured">Item 8</li>
<li class="featured">Item 9</li>
<li>Item 10</li>
</ul>
<button class="more-btn">Show More</button>

Just try hide and show using :not() filter
https://api.jquery.com/not-selector/
$('.feature-list > li:not(.featured)').hide()
$('.more-btn').click(function() {
$('.feature-list > li:not(.featured)').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 class="featured"><b>Item 2</b></li>
<li>Item 3</li>
<li>Item 4</li>
<li class="featured">Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li class="featured">Item 8</li>
<li class="featured">Item 9</li>
<li>Item 10</li>
</ul>
<button class="more-btn">Show More</button>

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>

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>

SlickNav menu, each li with specific color background?

I prepare my mobile menu with SlickNav but I have a little problem. I can not specify my css attributes on my <li> beacause SlickNav not taken into account. The problem is that I simply want to change the background of each of my <li>
Any idea?
<ul id="menu2">
<li>Parent 1
<ul>
<li>item 3</li>
<li>Parent 3
<ul>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</li>
<li>item 4</li>
</ul>
</li>
<li>item 1</li>
<li>non-link item</li>
<li>Parent 2
<ul>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>
I think you can use CSS3 :nth-child() Selector, like this:
ul:nth-child(1) { // first li
background-color: #ff0000;
}
ul:nth-child(2) { // second li
background-color: #ffffff;
}

Sort unordered list with Javascript / jQuery

I am creating unordered lists dynamically. This creates an output similar to this:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
<li>item 4</li>
<li>Item 5</li>
<ul>
<li>Item 5.1</li>
<li>Item 5.2</li>
<li>Item 5.3</li>
</ul>
<li>item 6</li>
</ul>
I would like to be able to sort through them, after they are created, so that any item that has a sublist(for example item 3 & item 5) will go to the top of the list, for output like this:
<ul>
<li>item 3</li>
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
<li>Item 5</li>
<ul>
<li>Item 5.1</li>
<li>Item 5.2</li>
<li>Item 5.3</li>
</ul>
<li>item 1</li>
<li>item 2</li>
<li>item 4</li>
<li>item 6</li>
</ul>
I am thinking I can do this with jQuery or the javascript .sort() method but I'm not sure where to go with it. Any advice?
Firstly you should put your sublists inside their parent element and give a class to your list, like this:
<ul class="autoReorder">
<li>item 1</li>
<li>item 2</li>
<li>item 3
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
</li>
<li>item 4</li>
<li>Item 5
<ul>
<li>Item 5.1</li>
<li>Item 5.2</li>
<li>Item 5.3</li>
</ul>
</li>
<li>item 6</li>
</ul>
Then in jQuery here is your solution:
$(document).ready(function(){
$('ul.autoReorder').find('li ul').parent().prependTo('ul.autoReorder');
});

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