I have a list which is dynamically built, but there are empty list items which need removing.
<ul>
<li>www</li>
<li>www</li>
<li>www</li>
<li></li>
<li></li>
<li></li>
</ul>
How do I do this with JQuery?
$('ul li:empty').remove();
$('ul li').filter(function() {return $(this).text() == '';}).remove();
$('ul').find('li').each(function(){
if($(this).is(':empty'))
$(this).remove();
});
Please use Andy's implementation (above mine :))
Related
I try to add a class to my list items if they have a sub ul but only at a specific window width:
<ul>
<li></li>
<li></li>
<li class="hassub">
<ul>
<li></li>
</ul>
</li>
<li></li>
</ul>
I found two working jsfiddles and tried to combine them.
This is what I got: https://jsfiddle.net/Flouks/413qdd63/
These are the two I try to combine:
1: http://jsfiddle.net/userdude/rzdGJ/1/
2: http://jsfiddle.net/userdude/rzdGJ/1/
Thanks in advance for your help.
(Note to myself: learn jquery)
You forgot to add JQuery to the JSFiddle.
Here is a link to the update one
Your code does add and remove the class as intended.
if ($window.width() < 500) {
return $bla.addClass('hassub');
}
$bla.removeClass('hassub');
I have a List and I want to add a list item before the last one with JQuery:
<ul id="myList">
<li></li>
<li></li>
<li></li>
<-- here i want to add the new one
<li id="myLastLi"></li>
</ul>
How can I achieve that?
As you're using jQuery, you may simply do
$('<li/>', {text:'something'}).insertBefore('#myLastLi');
Demonstration
Note that you don't have to give an ID to the last LI, you could do this without the id :
$('<li/>', {text:'something new'}).insertBefore('#myList li:last-child');
I'm just wondering how to improve this code :
pagination.children('li.active').prev().prev().prev().prev().prevAll('li.pgn').css("display","none");
I just don't like the .prev() chain and I didn't find a way to improve it but I'm sure you know how ;-)
Edit:
pagination is my ul which contains a lot of li with one who has the active class.
I want to select all the li before the li.active but not the first 5 previous one.
Exemple (forget the pgn class):
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="active"></li>
That will give this :
<li style="displat: none;"></li>
<li style="display: none;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="active"></li>
You can use :gt() selector.
pagination.children('li.active').prevAll('li:gt(4)').hide();
http://jsfiddle.net/MrvDX/
I think the fact you are doing this this way is indicative of the fact that the design of your page/app can be improved.
Why are you having to find the LI with the active class? Why don't you already know this? Surely it was your app that generated the markup in the first place.
It seems as though you are trying to determine state from markup, which I like to steer away from. You should have an object which tells you which index of LI is selected. Then you can use a much simpler jQ selector to select the indexes you are interested in.
Try this
EDIT
var pagination = $('ul');
var len = pagination.find('li.active').prevAll('li').length;
pagination.find('li.png').slice(0 , len-5).css('display','none');
WORKING FIDDLE
You could try something like this...
var $prevAll = pagination.children('li.active').prevAll('li.pgn');
var prevCount = $prevAll.length;
$prevAll.filter(function(index){
return (prevCount - index < 5)
}).hide() //instead of - .css("display", "none");
using the filter method and passing a function to it.
http://api.jquery.com/filter/
Here's a working example.
http://jsfiddle.net/aTzzK/2/
I have an arbitrarily deep list, like so:
<ul>
<li></li>
<li>
<ul>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</li>
Using jQuery, how can I select every li in the list that is not a leaf node. In other words, I want to select all of the li elements that have children ULs.
Thanks for your help!
jQuery('li:has(ul)');
More info about :has.
Here's another alternative:
$('li ul').closest('li')
This is likely to be a fair bit faster than :has on modern browsers, since it'll use the native querySelectorAll method on the main selector. :has can't use native support since it's not a standard CSS selector but a jQuery extension.
The following lines of code do two things. The first two lines add classes to the siblings immediately before and after an element with a given id (in this case a UL with id "nav")
The last two lines add the classes first and last to the first and last sibling elements whose parent has the id "nav".
This is jquery. How would I achieve the same with Mootools 1.11. Any help appreciated.
$('#nav .active').prev().addClass('prevtab');
$('#nav .active').next().addClass('nexttab');
$('#nav').children(":first").addClass('first');
$('#nav').children(":last").addClass('last');
formatting doesn't work in comments so repeating for zombat:
Using mootools 1.1
There is no edit button available to me, and I can't comment as I don't have enough rep.
Your solution is doing something, but not targeting the correct element.
This is the result I want and am getting with jquery:
<ul id="nav">
<li class="first"></li>
<li></li>
<li class="prevtab"></li>
<li class="active"></li>
<li class="nexttab"></li>
<li class="last"></li>
</ul>
This is the result of your js:
<div class="prevtab"></div>
<ul id="nav">
<li></li>
<li></li>
<li></li>
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="nexttab"><div>
Give this a shot.
$('nav').getNext().addClass('nexttab');
$('nav').getPrevious().addClass('prevtab');
var c = $('nav').getChildren();
c[0].addClass('first');
c[c.length-1].addClass('last');
Edit: Working now.
Second/Third edits:
Ok, I misunderstood the way you're using the .active class. Try this:
var n = $('nav').getElement('.active').getNext();
if (n) n.addClass('nexttab');
var p = $('nav').getElement('.active').getPrevious();
if (p) p.addClass('prevtab');
var c = $('nav').getChildren();
c[0].addClass('first');
c[c.length-1].addClass('last');
$each($$('#nav .active'),function(item){
item.getPrevious().classname='prevtab';
}
);
This is the first line.
Second you can use getNext
Third you can use $('#nav').getFirst //make sure it has children....
Fourth you can use getLast