I need to find a specific elements position in a jQuery collection.
For example in a collection of a elements I need to know the numeric position of the element with the "active" class.
<ul>
<li></li>
<li><a class="active" href="#"></a></li>
<li></li>
</ul>
I assumed using index would be the way to go but the following returns 0 no matter what the location of active.
$('ul li a').index('.active');
Is there any simple way to do what this?
Try this:
$('ul li a.active').index();
Note that even by using correct syntax this code always returns 0 as there is only one anchor link within li tags, you can find the index of parent li element instead.
$('ul li:has(a.active)').index();
Try:
$('ul li a').each(function(i) {
if ($(this).hasClass('active')) console.log(i);
});
jsFiddle example
Or
console.log ($('ul li:has(a.active)').index() );
This should do :
$('ul li a').index($('ul li a.active'));
If you pass a DOM element or jQuery object to index it returns the position of that element/object in the original collection.
jsfiddle for the sake of completeness
How about:
$('li').index($('.active').parent())
$("ul li a").each(function(i){
if($(this).hasClass("active")){
alert(i)
}
});
i hope it will solve your problem
Related
I have this ul li list:
<ul>
<li><div>Text</div>A</li>
<li><div>Text</div>B</li>
<li><div>Text</div>C</li>
<li>
<ul>
<li><div>Text</div>A1</li>
<li><div>Text</div>B1</li>
<li><div>Text</div>C1</li>
<li><div>Text</div>D1</li>
</ul>
</li>
<li><div>Text</div>E</li>
</ul>
I need to choose all "li" element from the first level.
In this example it will be:
<li><div>Text</div>A</li>
<li><div>Text</div>B</li>
<li><div>Text</div>C</li>
<li><div>Text</div>E</li>
Trying to use:
$('ul').children()
I get all "li" elements from the first level and second level.
Thank you very much.
Select li of ul:first which doesnot has a ul element as child.
$('ul:first').children('li:not(:has(ul))');
Fiddle
You can use following code which will search for 1st ul and then all li's:
$('ul:first>li')
You can add a class to the first ul and then call .children()
try
$('ul>li').css(//your doing//);
This will select the direct childs of the all ul tags in your code.
If you want to acess specific ul, try givig it a class or id.
Give the external ul a class:
<ul class="my_ul">
....
</ul>
and in jquery you an get them like:
$('.my_ul').children()
EDIT: my first code was getting al children.
You could change your selector to
$("'whatever element is above first level ul element' > ul > li")
The title sounds strange but what I want to achieve is simple.
In a tree of uls I want to get all li children from any ul that have not the - inline - style display: none. So I found this post and I mixed with the negation function :not(). The result was:
'ul:not([style*="display: none"]) .k-item'
Where .k-item is a common class for all my li elements. That selector worked in this simple fiddle. The problem is that it doesn't works in my application. I have a screenshot of some console commands that will illustrate my scenario:
As you can see on second command, it returns some li elements that lies under an ul which haves display: none among other attributes in its inline style. Example of those unexpected li with attribute data-uid with values starting with 099d, bbca and 14d2.
I don't know what I'm doing wrong or if exists a better selector for that purpose.
I would suggest using jQuery's :visible rather than looking for something in the style string and string matching in the style string could be problematic.
$("ul:visible .k-item")
First of all get all the li and check whether its parent (ul) is visible.
jsfiddle
$('li', '#layers').each(function(){
if($(this).parent().is(":visible")){
alert($(this).text())
}
});
OR
a neat version
jsfiddle
$(".k-item:visible").each(function(){
alert($(this).text())
});
Try using
$('ul:not([style*="display: none"]) li.k-item').each(function() { alert($(this).html()) });
HTML
<ul style="display: none">
<li class="k-item">1</li>
<li class="k-item">2</li>
<li class="k-item">3</li>
</ul>
<ul>
<li class="k-item">4</li>
<li class="k-item">5</li>
<li class="k-item">6</li>
</ul>
Fiddle: http://jsfiddle.net/3M2ZM/
I am having trouble finding the way to solve this issue. I have this ul-menu output by Wordpress:
<ul class="menu">
<li>
Page 1
</li>
<li>
Page 2
</li>
</ul>
But I want the end result to be like this - cloning and appending the anchor and put a clone below:
<ul class="menu">
<li>
Page 1
Page 1
</li>
<li>
Page 2
Page 2
</li>
</ul>
I have used jQuery - but I am not having any luck at all for 2 hours of trial and error. This is as close as I can get. But it is wrong.
/*jQuery*/
$('.menu li a:first-child').eq(0).clone().insertAfter('.menu li a:first-child');
Fiddle here: http://jsfiddle.net/67jXz/1/
You're not supposed to .eq(0); that will limit it to the first a element that's matched, so that will be cloned and inserted after every subsequent a, resulting in copies of "Page 1".
Instead, you need to perform the cloning and inserting for each individual element by iterating with .each(), like so:
$('.menu li a:first-child').each(function() {
$(this).clone().insertAfter(this);
});
Note that the .insertAfter(this) part refers to inserting the cloned element after the original element that was matched by the .menu li a:first-child selector; the same this in $(this) that references the matched element.
Updated fiddle
Try this code:
$(function(){
$('.menu li a:first-child').each(function(k,v){
$(v).clone().insertAfter(v);
});
});
jsfiddle
Let's presume you got a list with nested child lists.
<ul>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
And use document.querySelectorAll() to make a selection:
var ul = document.querySelectorAll("ul");
How can i use the ul collection to get the direct child elements?
ul.querySelectorAll("> li");
// Gives 'Error: An invalid or illegal string was specified'
Let's presume ul is cached somehow (otherwise i could have done ul > li directly).
In jQuery this works:
$("ul").find("> li");
But it doesn't in native querySelectorAll. Any solutions?
The correct way to write a selector that is "rooted" to the current element is to use :scope.
ul.querySelectorAll(":scope > li");
See my answer here for an explanation and a robust, cross-browser solution: https://stackoverflow.com/a/21126966/1170723
Because the ul returned is a NodeList, it doesn't implicitly loop over its contents like a jQuery collection. You'd need to use ul[0].querySelectorAll() or better still select the ul with querySelector().
Besides that, querySelectorAll() won't take a > and work from its current context. However, you can get it to work using lazd's answer (though check the browser compatibility), or any of these workarounds (which should have no browser issues)...
[].filter.call(ul.querySelectorAll("li"), function(element){
return element.parentNode == ul;
});
jsFiddle.
This will select all li elements that are descendants of your ul, and then remove the ones which are not direct descendants.
Alternatively, you could get all childNodes and then filter them...
[].filter.call(ul.childNodes, function(node) {
return node.nodeType == 1 && node.tagName.toLowerCase() == 'li';
});
jsFiddle.
You need to iterate over the NodeList returned by document.querySelectorAll() and then call element.querySelectorAll() for each element in that list.
i have a li items i need to change class of the clicked items as follow
remove class current from the default one
add class current to the clicked one
my html code here
<ul class="filter">
<li>recent</li>
<li>top popularity</li>
<li>top commented</li>
<li>other ...</li>
</ul>
and here is the jquery code to do that job
$(".filter > li a").click(function(){
$(".filter li a.current").removeClass("current");
$(this).addClass("current");
});
it works perfect otherwise when i clicked on any link else these links it apply that code to it, i need to apply this code only to ul.filter
Probably this would be easier and simpler. What it does is just removes its siblings current class and add new current class to itself.
$('.filter a').click(function(){
$(this).addClass('current').siblings().removeClass('current');
});
Use :not() to omit the current item
$(".filter > li a").not(".current").on('click', function(){
if(!$(this).hasClass("current")) {
$(".filter").find("a.current").removeClass("current");
$(this).addClass("current");
alert($(this).html());
}
});
Demo
This snippet should work for you!
$('.class a').on('click', function(){
$('.class a').removeClass('current');
$(this).addClass('current');
});
If you want the click processing to occur only within ul.filter then you should update your selector to reflect that:
$("ul.filter > li a")
Rather than
$(".filter > li a")
If you have more than one ul element with the "filter" class and you only want to apply the functionality to one of them then you should give that particular ul an id and change your selector to use the id.