Check if one of li doesnt have a class - javascript

I'm having trouble with this condition :
I have a series of li with a class, and I want to execute code if one of the li does not have this class.
For example :
<ul class="list-synthese">
<li class="hidden">Lorem</li>
<li class="hidden">Lorem</li>
<li class="hidden">Lorem</li>
<li class="hidden">Lorem</li>
<li>Lorem</li>
</ul>
Here is what I want to do :
if $('list.synthese > li').hasNOTclass('hidden'){
mycode;
}
Hope someone can help me !
Thanks ! :)

You can use :not selector. also you have incorrect selector for ul element:
if($('.list-synthese > li:not(.hidden)').length){
mycode;
}

A bad approach but working: Fiddle
$(function() {
$('.list-synthese > li').each(function(i, ele) {
if (!$(ele).hasClass('hidden')) {
alert('li number ' + (i + 1) + ' doesnt have class hidden')
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-synthese">
<li class="hidden">Lorem</li>
<li class="hidden">Lorem</li>
<li class="">Lorem</li>
<li class="hidden">Lorem</li>
<li>Lorem</li>
</ul>

Related

Disable `<a>` link inside <ul> issue

Basically I do have a block of HTML code for nested list as below:
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
Using this what I need to do is, I want to check li.level_1 has a <ul>, if so then I need to disable <a> link link which is directly inside li.level_1.
This is how I tried it in jquery, but its removing all a from the list.
if($('ul li').has('ul').length) {
$('ul li > a').removeAttr('href');
}
Can anybody tell me how to fix that issue?
You can check if li has ul and disable a like this.
$('.level_1:has(ul) > a').removeAttr('href')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
You could set an event listener like this:
Set an id to the top level ul element:
<ul id="top_level_ul">
jQuery
$(document).on('click', '#top_level_ul > li > a', function(e) {
e.preventDefault();
});
ALTERNATIVE (pointer-events)
You can also set pointer-events:none to prevent any interaction:
$('#top_level_ul > li > a').each(function() {
$(this.addClass('noPointer'));
});
CSS
.noPointer {
pointer-events: none;
}
You have to start your "search" for links from $('ul li')
var $node = $('ul li');
if($node.has('ul').length) {
$node.find('ul li > a').removeAttr('href');
}
See following example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
<script>
var $node = $('ul li');
if($node.has('ul').length) {
$node.find('ul li > a').removeAttr('href');
}
</script>
</body>
</html>
I hope it helps you. Bye.
Link
$(document).ready(function(){
$('.level_2').siblings('a').remove();
});
UPD
$(document).ready(function(){
$('.level_2').siblings('a').css('pointer-events','none');
});
or
$(document).ready(function(){
$('.level_2').siblings('a').attr('onclick','return false');
});

jquery issue with show hide li elements

I try to get an accordion like functionality, I have only <li>with classes .level1, .level2, .level3 ..etc, the issue I have is , if I click on .level2, items will hide until next .level2 element without issues.
But if I click on .level3 and hide .level4, and then click .level2 to hide .level3, I can see .level4 item under .level2.
I don't know how to fix that
Please check demo:
$('.level2').click(function(e) {
if ($(this).next('li').hasClass('level3')) {
$(this).nextUntil('.level2').toggle();
e.preventDefault()
}
})
$('.level3').click(function(e) {
if ($(this).next('li').hasClass('level4')) {
$(this).nextUntil('.level3').toggle();
e.preventDefault()
}
})
$('.level4').click(function(e) {
if ($(this).next('li').hasClass('level5')) {
$(this).nextUntil('.level4').toggle();
e.preventDefault()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="level1"><span>Level1</li>
<li class="level2"><span>Level2</li>
<li class="level2"><span>Level2</li>
<li class="level3"><span>Level3</li>
<li class="level3"><span>Level3</li>
<li class="level3"><span>Level3</li>
<li class="level4"><span>Level4</li>
<li class="level2"><span>Level2</li>
<li class="level3"><span>Level3</li>
<li class="level4"><span>Level4</li>
<li class="level4"><span>Level4</li>
<li class="level3"><span>Level3</li>
<li class="level4"><span>Level4</li>
<li class="level2"><span>Level2</li>
<li class="level3"><span>Level3</li>
<li class="level4"><span>Level4</li>
<li class="level4"><span>Level4</li>
<li class="level2"><span>Level3</li>
</ul>
Not sure what you are trying to achieve, Have a look on this, it might give you ideas of doing it cleaner and more efficient:
$('li a').click(function (e){
if($(this).parent().find('>ul').length>0){
$(this).parent().find('>ul').toggle();
}
e.preventDefault();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><span>Level1
<ul>
<li><span>Level2
<ul>
<li><span>Level3</li>
<li><span>Level3</li>
<li><span>Level3</li>
<li><span>Level3</li>
</ul>
</li>
<li><span>Level2</li>
<li><span>Level2</li>
<li><span>Level2
<ul>
<li><span>Level3</li>
<li><span>Level3</li>
<li><span>Level3</li>
<li><span>Level3</li>
</ul>
</li>
</ul>
</li>
</ul>
You're probably going about this in the wrong way if you're looking to toggle a structured menu of nested lists. But assuming you DO want to have an arbitrary flat list, you need to check if the following item is visible and then explicitly call show() or hide(). For example:
$('.level2').click(function (e){
toggleUntil(this, 'level3', 'level2');
e.preventDefault();
})
$('.level3').click(function (e){
toggleUntil(this, 'level4', 'level3');
e.preventDefault();
});
$('.level4').click(function (e){
toggleUntil(this, 'level5', 'level4');
e.preventDefault();
})
function toggleUntil(x, start, last) {
if ($(x).next('li').hasClass(start)) {
if ($(x).next('li').is(':visible')) {
$(x).nextUntil('.' + last).hide();
} else {
$(x).nextUntil('.' + last).show();
}
}
}

Clear and Add new class?

I have list like:
<ul id="portfolio-filter">
<li><a class=".tab1" data-filter=".Design" dir="ltr" href="#">Design</a></li>
<li><a class=".tab2" data-filter=".Tech" dir="ltr" href="#">Technology</a></li>
</ul>
<ul id="portfolio-list">
<li style='opacity:1'>Content</li>
<li style='opacity:1'>Content</li>
<li style='opacity:1'>Content</li>
<li style='opacity:1'>Content</li>
<li style='opacity:0'>Content</li>
<li style='opacity:0'>Content</li>
<li style='opacity:0'>Content</li>
</ul>
I use Jquery to add class (MYCLASS) where li has opacity = 1 like (run on page load):
//Add class if opacity
$('#portfolio-list li').map(function() {
if($(this).css('opacity') != '0')
$(this).addClass("MYCLASS");
});
But when I use click function (It will change opacity of each in another order) like:
<ul id="portfolio-list">
<li style='opacity:0'>Content</li>
<li style='opacity:0'>Content</li>
<li style='opacity:1'>Content</li>
<li style='opacity:1'>Content</li>
<li style='opacity:1'>Content</li>
<li style='opacity:3'>Content</li>
<li style='opacity:1'>Content</li>
</ul>
And I want i re-add class onclick, I used :
$filter.find('a').click(function (e) {
//Run filter
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
//Add class
$('#portfolio-list li').map(function() {
if($(this).css('opacity') != '0') {
$(this).addClass("MYCLASS");
} else {
$(this).removeClass("MYCLASS");
}
);
}
But It doesn't run correctly.
Everyone can help me? Thank you.
i tried my hand on your code and it appears it is working for me. i used each() to loop through all li tags within #portfolio-list li and apply some css class as i understood the question.
$(function(){
$('#portfolio-list li').each(function(){
if($(this).css('opacity') == 1){
$(this).addClass("MYCLASS");
}
});
});
here is working Demo.
you were using map() which seems identical in working but there is difference, See Here.
Try to change that "map" fucntion to an each function
$('#portfolio-list li').each(function() {

How to find who is li's parent?

Let's say we have this list:
<ul title="Fruit">
<li onClick="func(this)">Apple</li>
<li onClick="func(this)">Banana</li>
</ul>
<ul title="Meat">
<li onClick="func(this)">Chiken</li>
<li onClick="func(this)">Duck</li>
</ul>
Is it possible to find from which ul the li is clicked?
Yes, use parentNode:
<script type="text/javascript">
function func(el) {
alert(el.parentNode.title);
}
</script>
<ul title="Fruit">
<li onClick="func(this)">Apple</li>
<li onClick="func(this)">Banana</li>
</ul>
<ul title="Meat">
<li onClick="func(this)">Chiken</li>
<li onClick="func(this)">Duck</li>
</ul>​​​​​
Also note that value is only used for form elements such as input and select.
DEMO.
You should just pass this to the function, and use .parentNode to get its parent.
function func(element) {
var parent = element.parentNode;
// ...
}
if(this.parentNode.title === "Fruit") {
// first one
}
else {
// the other ul
}
obj.parentNode or using jQuery just: $(obj).parent()

Remove all ul within li except the current li

I have to remove all ul within li except the current li.
<ul>
<li id="Li0">
<ul>
<li><span>Childnode1</span></li></ul>
</li>
<li id="Li1">
<ul>
<li><span>Childnode2</span></li></ul>
</li>
<li id="Li2">
<ul>
<li><span>Childnode3</span></li></ul>
</li>
<li id="Li3">
<ul>
<li><span>Childnode4</span></li></ul>
</li>
<li id="Li4">
<ul>
<li><span>Childnode5</span></li></ul>
</li>
<li id="Li5">
<ul>
<li><span>Childnode6</span></li></ul>
</li>
</ul>
So If i click on the li with id 'li4' every other li that are previous to this li or next to this li should have there ul to be removed from dom.
I was thinking of using the .not operator in jquery but till now not able to do this.
is that what you are searching for?
$(function(){
$('li').click(function(){
$(this).siblings().children("ul").remove();
});
});
Demo: http://jsfiddle.net/wwvBL/
$('li').on('click',function(){
var obj= $(this);
id= obj.attr('id');
obj.parent().find('li:not(#'+id+') > ul').remove();
})
This should help.
$(function () {
$('ul:first').delegate("li[id^='L']", 'click', function () {
$("ul:first > li[id!='"+$(this).attr('id')+"'] > ul").remove();
});
});​
Demo: http://jsfiddle.net/EJWnn/
Use siblings to find all other adjacent elements:
$("li").click(function() {
$(this).siblings().find("ul").remove();
});
You might want to have a more specific selector than "li".

Categories

Resources