I have a variable set that represents an item in the list.
I also have the list:
<ul>
<li class="mylist">Item 1</li>
<li class="mylist">Item 2</li>
<li class="mylist">Item 3</li>
<li class="mylist">Item 4</li>
<li class="mylist">Item 5</li>
<li class="mylist">Item 6</li>
</ul>
What I need to do is to add a css class to the list thats in the position of the variable value.
For example:
If myVariable = '1' then list will look like this:
<ul>
<li class="mylist">Item 1</li>
<li class="mylist">Item 2</li>
<li class="mylist">Item 3</li>
<li class="mylist">Item 4</li>
<li class="mylist">Item 5</li>
<li class="mylist">Item 6</li>
</ul>
If myVariable = '3' then list will look like this:
<ul>
<li class="mylist">Item 1</li>
<li class="mylist">Item 2</li>
<li class="mylist">Item 3</li>
<li class="mylist">Item 4</li>
<li class="mylist">Item 5</li>
<li class="mylist">Item 6</li>
</ul>
and so on.
How can I do this?
var value = 3;
$('ul li.mylist a').filter(function () {
return $(this).text() === 'Item ' + value;
}).addClass('myclass');
You can use the eq method in jQuery for selecting element by index:
const myVariable = 3;
$('.mylist').eq(myVariable - 1).find('a').addClass('myClass');
Mind that eq assumes that your indices are 0-based (which means the first one is 0 and not 1). That's why it's myVariable - 1.
$("li.mylist").eq(position -1).find("a").addClass("myClass")
Related
I want to find the index of a list item element that has no attribute style="display:none;".
Here is my basic list:
<ol>
<li style="display:none;">LI 1</li>
<li>LI 2</li>
<li style="display:none;">LI 3</li>
<li style="display:none;">LI 4</li>
<li style="display:none;">LI 5</li>
</ol>
Thank you for your answers :)
While you could search for an element without a style attribute
const li = document.querySelector('ol li:not([style])');
console.log(li.textContent);
<ol>
<li style="display:none;">LI 1</li>
<li>LI 2</li>
<li style="display:none;">LI 3</li>
<li style="display:none;">LI 4</li>
<li style="display:none;">LI 5</li>
</ol>
If you're going to select elements based on the style display, I'd highly recommend using a class instead:
const li = document.querySelector('ol li:not(.hide)');
console.log(li.textContent);
.hide {
display: none;
}
<ol>
<li class="hide">LI 1</li>
<li>LI 2</li>
<li class="hide">LI 3</li>
<li class="hide">LI 4</li>
<li class="hide">LI 5</li>
</ol>
I think you can do like this.
const li = document.querySelector('li:not([style="display:none;"])');
console.log(li.textContent);
<ol>
<li style="display:none;">LI 1</li>
<li style="display:block;">LI 2</li>
<li style="display:none;">LI 3</li>
<li style="display:none;">LI 4</li>
<li style="display:none;">LI 5</li>
</ol>
Can anyone please help me on this problem.
I have a list order like:
<ul>
<li class="parent">Parent item 1</li>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
<li class="parent">Parent item 2</li>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
<li class="parent">Parent item 3</li>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</ul>
I want this like :
<ul>
<li class="parent">Parent item 1</li>
<div>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
</div>
<li class="parent">Parent item 2</li>
<div>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
</div>
<li class="parent">Parent item 3</li>
<div>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</div>
</ul>
is this possible to make it using jQuery?
Thanks in Advance.
If you are able to accept a semantically correct nested list, you could achieve that by using jQuery to loop through each .parent element and select each item after it until it hits the next .parent item using nextUntil(). Then, you create a new <ul> and append those children to it and then append the new <ul> to the parent <li>.
// Select all of the .parents and loop through them.
$('.parent').each(function() {
// Select all the following siblings starting from this .parent element until you reach the next .parent element.
var $children = $(this).nextUntil('.parent');
// Take the results and append them to a new ul element and then append that ul element to the current .parent li element.
$children.appendTo($('<ul>').appendTo($(this)));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="parent">Parent item 1</li>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
<li class="parent">Parent item 2</li>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
<li class="parent">Parent item 3</li>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</ul>
I git this list of items and an array to hold 4 of them. When clicking on an item i want it to get pushed to the array, but the array should never be more or less than 4 in its length. So when clicking on one of the LI's i want to push that item to the array. and when the array is full (when the lenght is 4) i instead want the first element in the array to be swapped out to whatever next item that gets clicked is.
My markup looks similar to this:
<ul>
<li>val 1</li>
<li>val 2</li>
<li>val 3</li>
<li>val 4</li>
<li>val 5</li>
<li>val 6</li>
<li>val 7</li>
<li>val 8</li>
<li>val 9</li>
</ul>
var ar=[];
function clickFunc(e){
if(ar.length<4){
ar.push(e.innerHTML);
}
else{
ar.unshift(e.innerHTML);
ar.pop();
}
console.log(ar)
}
<ul>
<li onclick="clickFunc(this)">val 1</li>
<li onclick="clickFunc(this)">val 2</li>
<li onclick="clickFunc(this)">val 3</li>
<li onclick="clickFunc(this)">val 4</li>
<li onclick="clickFunc(this)">val 5</li>
<li onclick="clickFunc(this)">val 6</li>
<li onclick="clickFunc(this)">val 7</li>
<li onclick="clickFunc(this)">val 8</li>
<li onclick="clickFunc(this)">val 9</li>
</ul>
u can unshift(),then pop() array.
I've got an unordered list that I want to sort. All the list items have a data attribute data-index with their corresponding list index number. I want to order the list according to this index number, however, I want to ignore the list item that has the class .active
So in my following structure I'm trying to return all the list items after the one with the class active in the order of their data-index. The list item with class .active should be ignored and stay on top.
<ul>
<li class="active" data-index="8">Item 8</li>
<li class="inactive" data-index="6">Item 6</li>
<li class="inactive" data-index="5">Item 5</li>
<li class="inactive" data-index="3">Item 3</li>
<li class="inactive" data-index="4">Item 4</li>
<li class="inactive" data-index="2">Item 2</li>
<li class="inactive" data-index="1">Item 1</li>
<li class="inactive" data-index="7">Item 7</li>
<li class="inactive" data-index="9">Item 9</li>
</ul>
How would I go about doing this?
I've included a jsfiddle with my basic structure.
http://jsfiddle.net/T9qQt/6/
Any help would be appreciated.
$('#sortList').click(function(){
$('ul .inactive').sort(function(a,b) {
return $(a).data('index') > $(b).data('index');
}).appendTo('ul');
});
Fiddle
Try
$('#sortList').click(function () {
var $active = $('.active');
var els = $active.nextAll().sort(function(e1, e2){
return +$(e1).data('index') - +$(e2).data('index');
}).insertAfter($active);
});
Demo: Fiddle
This would do the job,
$('#sortList').click(function () {
$("ul li.inactive").sort(function (a, b) {
return +$(a).data('index') - +$(b).data('index');
}).appendTo($("ul"));
});
Fiddle
<ul>
<li class="inactive" data-index="8">Item 8</li>
<li class="inactive" data-index="6">Item 6</li>
<li class="inactive" data-index="5">Item 5</li>
<li class="inactive" data-index="3">Item 3</li>
<li class="inactive" data-index="4">Item 4</li>
<li class="inactive" data-index="2">Item 2</li>
<li class="inactive" data-index="1">Item 1</li>
<li class="inactive" data-index="7">Item 7</li>
<li class="inactive" data-index="9">Item 9</li>
</ul>
<button id="sortList">Sort this list</button>
$('#sortList').click(function(){
$('.inactive').sort(function(x,y) {
return $(x).data('index') - $(y).data('index');
}).appendTo($('.inactive').parent());
});
Demo
I have the following HTML and I'd like to zebra stripe the contents in groups of 3:
<ul id="item-order">
<li class="thumbnail">Item 1</li>
<li class="thumbnail">Item 2</li>
<li class="thumbnail">Item 3</li>
<li class="thumbnail">Item 4</li>
<li class="thumbnail">Item 5</li>
<li class="thumbnail">Item 6</li>
<li class="thumbnail">Item 7</li>
<li class="thumbnail">Item 8</li>
<li class="thumbnail">Item 9</li>
</ul>
So I'd like to generate the following using jQuery:
<ul id="item-order">
<li class="thumbnail stripe">Item 1</li>
<li class="thumbnail stripe">Item 2</li>
<li class="thumbnail stripe">Item 3</li>
<li class="thumbnail">Item 4</li>
<li class="thumbnail">Item 5</li>
<li class="thumbnail">Item 6</li>
<li class="thumbnail stripe">Item 7</li>
<li class="thumbnail stripe">Item 8</li>
<li class="thumbnail stripe">Item 9</li>
</ul>
How can I go about this? I have something like this in mind, but I'm not sure what to put in the if statement.
$('#item-order li:visible').each(function (i) {
if (...) $(this).addClass('stripe');
});
If you want to add it to the first 3 in sets of 6, you can use the modulus 6 operator. If you want to start with stripes use the following:
$('#item-order li:visible').each(function (i) {
if (i%6 <= 2) {
$(this).addClass('stripe');
}
});
jquery has :odd and :even selectors, so you can just do:
$( '#item-order li:odd' ).addClass( 'odd' );
$( '#item-order li:even' ).addClass( 'even' );
EDIT, completely missed the point, this should be about what you want:
$('#item-order li:visible').each(function (i) {
if( i % 6 <= 2 ) $(this).addClass('stripe');
});