jQuery targeting elements with index() - javascript

So I have two unordered lists, with the same amount of items in them. So let's assume items in unordered list #2 are all hidden. The only way to make them appear is if you click on the items in unordered list #1.
so basically
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li class="hide">item 1</li>
<li class="hide">item 2</li>
<li class="hide">item 3</li>
<li class="hide">item 4</li>
</ul>
Now the way I'm trying to accomplish this is using the index() method, but I'm not sure how to properly approach this code.
This is how I thought of it.
$('.list1').on('click', 'li', function() {
$('.list2 li').index($(this).index()).toggleClass('active');
});
so when you click on an line item in .list1, whatever the index of that line item is, is the index I want to target in .list2
the problem I'm having is that when I console log it, I'm getting weird index numbers. The first line item would show up as 2 rather than 0, and the index for the 2nd line item would be -1.
what am I doing wrong? a lot I'm sure.
thanks in advance guys!

Jquery .index() return index of selected element. You need to use :eq() selector or .eq() method to selecting element with index.
$('.list1').on('click', 'li', function() {
$('.list2 li').eq($(this).index()).toggleClass('active');
});
.hide { display: none; }
.active { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li class="hide">item 1</li>
<li class="hide">item 2</li>
<li class="hide">item 3</li>
<li class="hide">item 4</li>
</ul>

try this, this will work for you fine
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
/* in here we get the ul which the class name is list2 and get the li elements inside it and hide those first*/
ul.list2 li{
display: none;
}
</style>
<body>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("ul.list1 li").click(function(){
var theindex = $(this).index();//in here you get the index number of clicked li element inside list1 class
$("ul.list2 li").eq(theindex).slideToggle(500);//then in here, you show the same index li element in list2 , which we are hidden.
});
});
</script>
</html>

Related

Revert list to previous order after prependTo using Jquery

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>

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>

jQuery Each, Iterate from starting element? [duplicate]

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>

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;
}

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>

Categories