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() {
Related
I have a question on Jquery. If I click on Link1, which does not have any ul.children and the class current_page_item will be added(not shown in this code as it will be added automatically by Wordpress), then ul.children in Link2 should be hidden.
If i click on Link 2, which will have both class page_item_has_children current_page_item, in this case ul.children should be shown. I have tried my code bellow, which is i know it is absolutely wrong. Please give me your advices. Many thanks.
if($(.navigation).hasClass(page_item_has_children)){
(.navigation .page_item_has_children .children).hide();
}else if( $(.navigation).hasClass(page_item_has_children) && $(.navigation).hasClass(current_page_item)){
(.navigation .page_item_has_children .children).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3</li>
<li class="page_item ">Link4</li>
</ul>
</li>
</ul>
This solution is a bit more towards your scenario (edited based on comment):
$(".navigation li").on("click", function() {
if ($(this).hasClass("page_item_has_children") && $(this).hasClass("current_page_item")) {
$(".navigation .children").show();
} else {
$(".navigation .children").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item links">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
How about simply hiding all nested UL elements, then simply showing the children of the clicked one?
$(".navigation li").each(function() {
// When we first load, hide all nested menus.
$(this).children("ul").hide();
if (localStorage.menuNumber) {
$(".navigation li").eq(localStorage.menuNumber).children().show();
}
})
.on("click", function() {
// When any top-level ul is clicked, hide the
// nested menus then show the current one.
$(this).parent().children().find("ul").hide();
$(this).children().show();
// We also want to persist this selection,
// should the user refresh...
localStorage.menuNumber = $(this).index;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
Edited it so that when it initially loads, all nested uls are hidden. Hope this helps! And edited again, to store the clicked menu in local storage. Sadly, for security reasons, this won't work here. See it as a fiddle: https://jsfiddle.net/snowMonkey/fnuvvLwb/
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();
}
}
}
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>
I have a .slideToggle making a list dropdown, but unfortunately it makes all lists dropdown, I need to make it only dropdown the list below the a that I'm clicking on. Sure this is a simple issue, still pretty new to jquery.
Jsfiddle: http://jsfiddle.net/darcyvoutt/shErA/
The following finds the next ul element and runs slideToggle() on it.
$(document).ready(function () {
$('.nav-filters-list-item a').click(function () {
$(this).next('ul').slideToggle(70);
});
});
See this jsFiddle
Try adding an id for each dropdown like this:
<ul class="nav-filters-list">
<li class="nav-filters-list-item" id="genre">Genre
<ul>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
</ul>
</li>
<li class="nav-filters-list-item" id="tags">Tags
<ul>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
</ul>
</li>
<li class="nav-filters-list-item">Date
</li>
<li class="nav-filters-list-item">Order
</li>
</ul>
Javascript:
$(document).ready(function () {
$('#genre a').click(function () {
$('#genre ul').slideToggle(70);
});
$('#tags a').click(function () {
$('#tags ul').slideToggle(70);
});
});
HTML:
<li class="page_item ">
A
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
</ul>
</li>
<li class="page_item ">
B
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
<li class="page_item">3</li>
<li class="page_item">4</li>
</ul>
</li>
<li class="page_item ">
C
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
<li class="page_item">3</li>
<li class="page_item">4</li>
</ul>
</li>
JS:
$('.page_item').click(function() {
var that = this;
$('.page_item').each(function() {
if (that == this) return true; //continue
$('.children:not(:hidden)', this).slideToggle();
});
$('ul.children', this).slideToggle();
});
Online demo: http://jsfiddle.net/kHLuR/1/
How can I make the first section li opened by default?
Variant #1 Pure CSS solution:
.page_item:first-child .children {
display: block;
}
Demo: http://jsfiddle.net/dfsq/kHLuR/7/
Note: :first-child works in IE8+. If you need to support older version you can give another class to your first li, e.g: <li class="page_item page_item-first"> http://jsfiddle.net/dfsq/kHLuR/9/
Variant #2. Trigger click event on the first .page_item:
$('.page_item').click(function () {
// ...
})
.filter(':first').click();
Demo: http://jsfiddle.net/dfsq/kHLuR/8/
Add this code to simulate a click event when the page is loaded: LIVE DEMO
$(document).ready(function () {
$('a').eq(0).trigger('click');
});
You can use jQuery's .ready() to execute code immediately after the page loads.
Take a look at http://api.jquery.com/ready/