I'm iterating through li elements then applying css on some li elements that meets my criteria.
lets say i have a 15 total of li elements in ul then i will css class using javascript .addclass hide_me on li count 11 to 15.
this is the html:
<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>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
</ul>
this i want to make using JavaScript/jquery
<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>
<li>item 9</li>
<li>item 10</li>
<li class="hide_me">item 11</li>
<li class="hide_me">item 12</li>
<li class="hide_me">item 13</li>
<li class="hide_me">item 14</li>
<li class="hide_me">item 15</li>
</ul>
So far i came up with this JavaScript code but its not working.
my Javascript:
<script>
$(document).ready(function(){
$.each($('.items'), function() {
var children = $(this).find(">li");
var count_items = children.length;
for (var items = 11; items < count_items; items++) {
//console.log(items); //output 11, 12, 13, 14, 15
$(".items li:nth-of-type("+ items +")").addClass('.hideme'); // this is css selector by nth-type
}
});
});
</script>
$('ul li:gt(9)').addClass('addedclass')
.addedclass{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>
<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>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
</ul>
Use :gt() selector. No need to iterate the li
Index start at 0
Description: Select all elements at an index greater than index within the matched set.
Try this
$("li").each(function(k,v){
if(k>9)
$(this).addClass("hide-me");
});
// Apply css on class applied
$(".hide-me").css({ 'color':'red'});
https://jsfiddle.net/sum1/yzubc169/
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>
I have this nested list:
<ul>
<li>Item 1
<ul>
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Item 2A</li>
<li class="active">Item 2B</li>
<li>Item 2C</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Item 3A</li>
<li>Item 3B</li>
<li>Item 3C</li>
</ul>
</li>
</ul>
What I need is: When I hover on a list item with class="active", this specific item 'Item 2B' together with its parent 'Item 2' to be colored red. 'Item 2A' and 'Item 2C' should NOT be colored.
I tried closest():
$("li").on("mouseenter", function () {
if ($(this).hasClass("active")) {
$(this).css("color", "red");
$(this).closest("ul").closest("li").css("color", "red");
}
});
Also parent().parent():
$(this).parent().parent().css("color", "red");
but of course they both color the whole 'Item 2' list item including all children 2A, 2B and 2C
You have to wrap each of the parent element into some html element like div or span.
Solution
HTML
<ul>
<li>Item 1
<ul>
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li><span>Item 2</span>
<ul>
<li>Item 2A</li>
<li class="active">Item 2B</li>
<li>Item 2C</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Item 3A</li>
<li>Item 3B</li>
<li>Item 3C</li>
</ul>
</li>
</ul>
JS
$("li").on("mouseenter", function () {
if ($(this).hasClass("active")) {
$(this).css("color", "red");
$(this).parent().parent().find("span").css("color", "red");
}
});
For this to work you will need to wrap the Item 2 text in a containing element, such as a span, otherwise the colour of all child elements will be changed too.
Then you can use .parent.closest('li') to get the li, before using children() to retrieve that span. Try this:
$("ul").on("mouseenter mouseleave", 'li.active', function(e) {
var $target = $(this).parent().closest('li').children('span');
$target.add(this).toggleClass('hover', e.type == 'mouseenter');
});
.active {
font-weight: bold;
}
.hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span>Item 1</span>
<ul>
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li>
<span>Item 2</span>
<ul>
<li>Item 2A</li>
<li class="active">Item 2B</li>
<li>Item 2C</li>
</ul>
</li>
<li>
<span>Item 3</span>
<ul>
<li>Item 3A</li>
<li>Item 3B</li>
<li>Item 3C</li>
</ul>
</li>
</ul>
Note that the parent() call is required before calling closest() as closest() will match the current li element, which we do not want, so parent() is required to 'hop' over that element.
I'd probably do it by:
Using a standard :hover rule for the li itself
Using a class, not direct styling, for its parent li
Re-asserting the color for the subordinate ul elements (and thus their children) under the li with the class in the CSS
Like this:
$("li")
.on("mouseenter", function() {
if ($(this).hasClass("active")) {
$(this).parent().closest("li").addClass("has-active");
}
})
.on("mouseleave", function() {
if ($(this).hasClass("active")) {
$(this).parent().closest("li").removeClass("has-active");
}
});
li {
color: black;
}
li.has-active {
color: red;
}
li.active:hover {
color: red;
}
.has-active ul {
color: black;
}
<ul>
<li>Item 1
<ul>
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Item 2A</li>
<li class="active">Item 2B</li>
<li>Item 2C</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Item 3A</li>
<li>Item 3B</li>
<li>Item 3C</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Maybe am overlooking this, but I can't figure why this is not working.
I'm creating a draggable list in jquery-ui, using the draggable widged from jquery-ui, but I can't seem to be able to make the li draggables, what am doing wrong?
HTML:
<section>
<ul id="sortable1">
<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>
</section>
jQuery:
$('#sortable1 li').draggable({
containment: 'section',
cursor: 'move',
revert: true
});
Thanks a lot!
Just add following code to script.
$( "ul, li" ).disableSelection();
Example
You need jQuery-ui.js (https://code.jquery.com/ui/1.11.4/jquery-ui.js)
Check this:
$(function() {
$('#sortable1 li').draggable({
containment: 'section',
cursor: 'move',
revert: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<section>
<ul id="sortable1">
<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>
</section>
Seems like the mistake is somewhere else in my project, I created a test project and it works, apologies, my mistake.
I have a long unordered list that I'd like to hide all but the first 3 on load, and then expand to all on click.
Here's my jQuery so far:
$('#myList').find('li:gt(3)').addClass('togglr').hide().end().append(
$('<li class="show_more_btn">Read more ยป</li>').click(function(){
$(this).siblings('.togglr').toggle();
if ($(this).hasClass('expanded')){
$(this).text('View All');
$(this).removeClass('expanded');
} else{
$(this).text('View Less');
$(this).addClass('expanded');
}
});
And my html:
<ul id="myList">
<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>
Here's a jsFiddle: http://jsfiddle.net/t2jrZ/
Where am I going wrong?
You were almost there! Maybe just thinking too much ;)
The prob with your current code is the last }); at the end of your current script, replace that with }));
HTML
<ul id="info">
<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>
<button type="button" onclick="showAll();">Show All</button>
Javascript:
var limit = 3;
$('#info li:lt(' + limit + ')').show();
$('button').click(function(){
$('#info li').show();
});
http://jsfiddle.net/t2jrZ/2/
I have here a JSfiddle demonstrating my problem.
http://jsfiddle.net/J6uM5/4/
<div id="list-A" style="height:50px; overflow-y:scroll; border:1px solid red">
<ul class="sortable">
<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>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
</ul>
<div id="list-B">
<ul class="sortable">
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
And here is the JS
$(function() {
$('.sortable').sortable({
connectWith: ".sortable",
scroll:false,
}).disableSelection();
});
The issue is that sortable1 (although hidden by the div) still extends to sortable2 in the dom. In order to successfully drag an item from list1 to list2, you must be scrolled to the bottom of list1 or if you are scrolled down far enough that list1 isnt overlapping list2. Any work around would be appreciated.
By setting the height/overflow on the actual sortable list (ul) instead of the wrapper, it seems to work.
#sortable1 {
height:25px;
overflow-y:scroll;
padding-bottom:35px;
}
See here:
http://jsfiddle.net/J6uM5/8/
Is that what you were looking for?