Change css class after given number of items inside div - javascript

I need to change css display value of items inside div using jQuery.
What I need to do is, get number of items inside the div element. (Ex- li elements).
If number of li elements inside the div is more than 6, I need to set display:none css value to them, while first 6 li items remain display:block
How can I do that?
I can get number of li elements inside div by using this code,
$(window).ready(function () {
var itemCount = 1;
if ($(window).width() < 768) {
if ($('#my-div li').length > 6) {
var k = $('#my-div li').length;
alert("no of items =" + k);
}
}
});
How can I achieve this?


You can use $('#my-div li').not(":lt(6)").hide() to show the first 6 li in your div.
Demo
$(window).ready(function() {
var itemCount = 1;
if (true) { // changed < to > for the example
if ($('#my-div li').length > 6) {
var k = $('#my-div li').length;
alert("no of items =" + k);
$('#my-div li').not(":lt(6)").hide()
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</div>


Here you got a very easy way to show only the first 6 elements with slice() method, check this:
if($('#my-div > li').size() > 6){
$('#my-div > li').slice(6).hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="my-div">
<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>


You can loop the list and hide it if the index is more than N.
Index start at 0
$('.container > li').each(function(i, e) {
if (i >= 6) { $(this).hide() }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="container">
<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>


Another approach using jQuery selector :gt
$('#my-div li:gt(5)').hide(); //Index starts from 0 so 5 is 6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="my-div">
<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>


$(document).ready(function(){
$("ul li:gt(5)").hide();
//List elements with an index > 5
});
<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>
</ul>

Related

how to make a class keep in that ul li tag after mouseover listener out from that div?

i am trying to make option select which use DOM to choose the option in div
here is my dropdown html : so I make this div scrollable and have event listener up and down
then up and down on focus , I will add class hover which gonna have background-color
also when mouse over to that LI tag, gonna add that class as well
but after mouse out from the box it keep deleted the class on muy function
how to make that class steady/keep in that li tag after i am out from the box ?
var active = document.querySelector(".hover") || document.querySelector(".dropdownItemContainer li");
document.addEventListener("keydown",handler);
document.addEventListener("mouseover",handler);
function handler(e){
active.classList.remove("hover");
if (e.which == 40){
active = active.nextElementSibling || active;
}else if (e.which == 38){
active = active.previousElementSibling || active;
}else{
active = e.target;
}
active.classList.add("hover");
}
ul.dropdownItemContainer li.hover {
background-color: #8284e6;
}
.dropdown-test {
height: 90px;
}
<div class="dropdown-test">
<ul class="dropdownItemContainer">
<li class="hover">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 5</li>
<li>Item 6</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
can anyone help to explain also and using javascript only? please

The "problem" is the script will delete hover class when you hover another element, you need to check if this element is into this for example (you can use your method instead) i add data-attribute and check if have this data-checker into script, if not don't do nothing.
var active = document.querySelector(".hover") || document.querySelector(".dropdownItemContainer li");
document.addEventListener("keydown", handler);
document.addEventListener("mouseover", handler);
function handler(e) {
if (e.target.hasAttribute("data-checker")) {
active.classList.remove("hover");
if (e.which == 40) {
active = active.nextElementSibling || active;
} else if (e.which == 38) {
active = active.previousElementSibling || active;
} else {
active = e.target;
}
active.classList.add("hover");
}
}
ul.dropdownItemContainer li.hover {
background-color: #8284e6;
}
.dropdown-test {
height: 90px;
}
<div class="dropdown-test">
<ul class="dropdownItemContainer">
<li class="hover" data-checker>Item 1</li>
<li data-checker>Item 2</li>
<li data-checker>Item 3</li>
<li data-checker>Item 4</li>
<li data-checker>Item 5</li>
<li data-checker>Item 6</li>
<li data-checker>Item 5</li>
<li data-checker>Item 6</li>
<li data-checker>Item 2</li>
<li data-checker>Item 3</li>
<li data-checker>Item 4</li>
<li data-checker>Item 5</li>
<li data-checker>Item 6</li>
<li data-checker>Item 5</li>
<li data-checker>Item 6</li>
</ul>
</div>
If you want use data-attribute only into <ul> use this code:
var active = document.querySelector(".hover") || document.querySelector(".dropdownItemContainer li");
document.addEventListener("keydown", handler);
document.addEventListener("mouseover", handler);
function handler(e) {
e.preventDefault();
let element = null;
if (e.which === 40) {
element = active.nextElementSibling;
}
if (e.which === 38) {
element = active.previousElementSibling;
}
if ((e.target.parentElement && e.target.parentElement.hasAttribute("data-checker")) || (element && element.parentElement.hasAttribute("data-checker"))) {
active.classList.remove("hover");
if (e.which == 40) {
active = active.nextElementSibling || active;
} else if (e.which == 38) {
active = active.previousElementSibling || active;
} else {
active = e.target;
}
active.classList.add("hover");
}
}
ul.dropdownItemContainer li.hover {
background-color: #8284e6;
}
.dropdown-test {
height: 90px;
}
<div class="dropdown-test">
<ul class="dropdownItemContainer" data-checker>
<li class="hover">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 5</li>
<li>Item 6</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>

hiding list items and show new li on click, but now I always need to have an empty li to "hide" them all

I've got a script that checks an li list and will show the first, with every click it will show the next li.
The problem is with this script, I have to add an empty li to "hide" all of them, is there a way to work around this, with this script?
$('#test-div2 ul li').hide().filter(':lt(1)').show();
$('#hint-1').click(function(){
$eL = $('#test-div2 ul li').filter(":visible");
$("#test-div2 ul").find("#test-div2 ul li").hide().next().show();
if($eL.next().length>0){
$eL.next().show();
}
});
This is the html:
<ul>
<li></li>
<li>hint 1</li>
<li>hint 2</li>
<li>hint 3</li>
<li>hint 4</li>
<li>hint 5</li>
<li>hint 6</li>
<li>hint 7</li>
</ul>

How about just making the container div the thing to click to get a hint and cleaning up your JQuery a bit?
$('#hints li').hide();
$('#test-div2').click(function(){
$eL = $('#hints li').filter(":visible");
$("#hints li:first-child").show();
if($eL.next().length > 0){
$eL.next().show();
}
});
#test-div2 {
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hints">
<li>hint 1</li>
<li>hint 2</li>
<li>hint 3</li>
<li>hint 4</li>
<li>hint 5</li>
<li>hint 6</li>
<li>hint 7</li>
</ul>
<div id="test-div2">Show hint</div>

is it possible, to add auto incremental classes to a list by using jquery or javascript

is it possible, to add auto incremental classes to a list
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
Now, If I hover on Element 3 then, add auto incremental classes to li like example below...
<ul id="list">
<li class="left2">Element 1</li>
<li class="left1">Element 2</li>
<li>Element 3</li>
<li class="right1">Element 4</li>
<li class="right2">Element 5</li>
</ul>
Again if hover on Element 1 then, add auto incremental classes to li like example below...
<ul id="list">
<li>Element 1</li>
<li class="right1">Element 2</li>
<li class="right2">Element 3</li>
<li class="right3">Element 4</li>
<li class="right4">Element 5</li>
</ul>
sorry about my poor English. Thank you.

$('li').hover(function() {
$('li').removeClass();
var next = $(this).nextAll();
next.each(function(i, v) {
$(this).addClass('right' + (i+1))
})
var prev = $(this).prevAll();
prev.each(function(i, v) {
$(this).addClass('left' + (i+1))
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
Use .prevAll() and .nextAll()
Description: Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
Description: Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
then iterate on the li and assign the index. make sure to remove the li classes so it wont stack up

Based on example, I cleared all the class in <li> when mouseenter anyone of the <li> and add new class for them.
left1+n will add to previous all <li> and right1+n will add to next all <li>
$("#list > li").on("mouseenter", function(){
$("#list > li").attr("class", "");
$(this).prevAll("li").each(function(i) {
$(this).addClass('left' + (i+1));
});
$(this).nextAll("li").each(function(i) {
$(this).addClass('right' + (i+1));
});
});

Get id From Event Trigger

I have tried everything that I have found on Stack Overflow, but I cannot get this to work. Here is my code.
$(document).ready(function(){
$(".category, .submenu").mouseenter(function(){
var i = 0;
var id = "#category1" /*-- $(obj).attr("id"); */
if (id == "#category1") {i = 1};
$("#submenu" + i).toggleClass("submenuHover");
$("#category" + i).toggleClass("categoryHover");
});
$("#category1, #submenu1").mouseleave(function(){
$("#submenu1").toggleClass("submenuHover")
$("#category1").toggleClass("categoryHover");
});
$("#category2, #submenu2").mouseenter(function(){
$("#submenu2").toggleClass("submenuHover");
$("#category2").toggleClass("categoryHover");
});
$("#category2, #submenu2").mouseleave(function(){
$("#submenu2").toggleClass("submenuHover");
$("#category2").toggleClass("categoryHover");
});
});
<a id="category1" class="category" href="#">Category 1</a>
<div id="submenu1" class="submenu">
<div>
<b>Column 1</b>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div>
<b>Column 2</b>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
<a id="category2" class="category" href="#">Category 2</a>
<div id="submenu2" class="submenu">Submenu #2
<div>
<b>Column 1</b>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div>
<b>Column 2</b>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
line > var id = "#category1" /*-- $(obj).attr("id"); */
is where my problem is.
I have commented out $(obj).attr("id"); and added "#category1".
It works like this.
How do I get the id so I can condense this code into one block?
Also, this is still a work in progress so once I figure out this step I want to combine mouseenter and mouseleave to use the same value of i, and I don't know how to proceed with that part yet.

To get the id from the class that triggered the event:
$(".category, .submenu").mouseenter(function(){
var id = $(this).attr('id');
...
}
Next time make a JSFiddle but here's one I made for you, showing that it works.
https://jsfiddle.net/3yn4e0ng/
Look in the console for proof that it is getting your id.
Lastly, you're going to have issues with your comparison statements like these:
if (id == "#category1") {i = 1};
because jQuery doesn't return the (#) symbol. You're explicitely asking for the id so there's no reason for jQuery to pass back a # sign into the string, indicating that thisis an id.
Consider this instead:
if (id == "category1") {i = 1};
Note: There's no reason for you to use == over === unless your insecure about whether the id that jQuery fetches is of type string. Read this amazing post: Which equals operator (== vs ===) should be used in JavaScript comparisons?

you can do it like this:
var id = $(this).hasClass("category") ? $(this).attr("id") : $(this).closest(".submenu").prev("a").attr("id");
this is a working fiddle.

Divide groups of unordered lists into sub-groups of 3

I have groups of unordered lists and I am trying to divide each list group into sub-groups of 3 dynamically. So far I have this:
var uls = $("ul > li");
for(var i = 0; i < uls.length; i+=3) {
uls.slice(i, i+3).wrapAll("<ul class='new'></ul>");
}
... for some sample HTML below
<h2>Group 1</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<h2>Group 2</h2>
<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>
</ul>
The issue I am having is that my code just lumps all the <ul>s together without regard to groups, i.e. 'group 1' 'group 2' I tried using .each(function() { on $("ul > li") but I just get errors. I also tried moving down the each function after .length but that did not work either.
So the final HTML would look like this:
<h2>Group 1</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<h2>Group 2</h2>
<ul>
etc...
My fiddle is here but as you can see it's not quite working yet.

How's this? http://jsfiddle.net/4Bms6/
$('ul').each(function(){
var uls = $("li", this);
for(var i = 0; i < uls.length; i+=3) {
var lis = $("li", this);
uls.slice(i, i+3).wrapAll("<ul class='new'></ul>");
}
});​
The reason you were getting incorrect grouping is because you were starting off by collecting every single li ("ul > li" equates to all li that are children of any ul). What you should have been doing is selecting all li that are children of each ul, perform the grouping, then move on to the next ul.

Categories

Resources