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")
Related
I have just started my career. I got one requirement of getting the value inside an anchor tag which is inside div, ul and li tags.
<div class="abc">
<ul><li><a>Test</a></li><li class="selected"><a>Test</a></li><ul>
</div>
I want to fetch the anchor tag value which is under li tag having class selected using javascript. The hierarchy starts from div-ul-li
I know to get the values by using document.getElementyId, but this looks like complex for me
Any ideas would be very helpful for me.
If I understood you correctly, you need to use the whole hierarchy?
In this case, querySelector is your friend. The query looks like this:
querySelector('div.abc > ul > li.selected > a').
In detail that means:
div.abc gets us the div with the class abc
> refers to a child element of the element left to >, so we referr to ul which is a child node of your div abc
Now we want the div with the class selected which is a child node of ul, so we use > again
Last but not least we want to access the a tag inside of the div selected. Again we'll do that by using >
var text = document.querySelector('div.abc > ul > li.selected > a').textContent;
console.log(text);
<div class="abc">
<ul>
<li><a>Test</a></li>
<li class="selected"><a>Test</a></li>
</ul>
</div>
I can't seem to understand why removeClass isn't removing the active class when I click on another li. If it were the same li then I could use siblings to remove the class but sadly that doesn't work here either.
I'd like to understand this simple problem that I'm having.
$('.r-picker li').click(function(){
$('.r-picker li .data.active').removeClass('active');
$('.r-picker li .data').addClass('active');
});
.active{
color:red;
font-size:25px;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-picker">
<ul>
<li>
<div class="data">me1</div>
</li>
<li>
<div class="data">me1</div>
</li>
</ul>
</div>
http://jsfiddle.net/Lb65e/125/
Updated fiddle.
You should use $(this) instead to refer to the clicked li :
$('.data', this).addClass('active');
Else the .data selector in your code will add class to all the elements with this class :
$('.r-picker li .data').addClass('active');
NOTE : Also you need to remove the class active from all the elments with class data when you click using :
$('.r-picker li .data').removeClass('active');
Hope this helps.
$('.r-picker li').click(function() {
$('.r-picker li .data').removeClass('active');
$('.data', this).addClass('active');
});
.active{
color:red;
font-size:25px;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-picker">
<ul>
<li>
<div class="data">me1</div>
</li>
<li>
<div class="data">me1</div>
</li>
</ul>
</div>
Your code is working. Here's what it does:
$('.r-picker li .data.active').removeClass('active');
That finds all elements with classes data and active, and removes active from all of them.
$('.r-picker li .data').addClass('active');
That finds all elements with class data and adds the class active to all of them.
Thus, once that runs, you'll have added the class active back to all the elements from which it was removed.
In your event handler, when adding the class, you need to add it only to the <li> involved:
$(this).find(".data").addClass("active");
The jQuery event mechanism makes sure that this is bound to the DOM element involved with the event, so $(this) gives you a jQuery object for that element. The .find() method performs a DOM selector search starting from that element, so $(this).find(".data") finds elements with class data only in the DOM subtree beneath the clicked element.
You need to highlight the div in the current li.
$('.r-picker li').click(function() {
$('.r-picker li .data.active').removeClass('active');
$(this).find('.data').addClass('active');
});
Which first removes the active class, and then find the div.data in .this li and adds the class back...
Heres your fiddle updated and working: http://jsfiddle.net/Lb65e/126/
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 have a list inside a toggled div...
<li>
Link
<ul stlye="display:none;">
<li>Child Link</li>
</ul>
</li>
Ive written a piece of jQuery to toggle the display of the child UL only when a child link is clicked it no longer works (It doesnt go through to google), can anybody see where im going wrong?
// Dropdown
$('.archives ul li a').click(function(){
$(this).parent().find('ul').slideToggle();
return false;
});
STYLE is spelled wrong.
stlye=
From your post's title it appears you want something like this...
$('.archives ul li a').click(function(){
var $children = $(this).parent().find('ul');
$children.slideToggle();
return $children.length > 0 ? false : true;
});
Return will be false only when child ULs are found.
Assuming what you've shown is inside a ul which is in turn inside an element with class archives, then the selector .archives ul li a matches both the parent and child anchors, because you've used a descendant selector, and so your handler gets called for the child, and the return false; prevents it from doing its default action (following the link).
If your goal is to have the handler triggered only for the earlier link and not for the child link, then you may need to be more specific. You haven't shown enough of your markup for us to help you be more specific, though. If I assume your markup looks something like this:
<div class="archives">
<ul>
<li>
Link
<ul style="display:none;">
<li>Child Link</li>
</ul>
</li>
</ul>
</div>
...then the selector to match only the "Link" anchor and not the "Child Link" anchor would be .archives > ul > li > a (e.g., using direct child selectors).
Also note that you had stlye rather than style, but I assume that's just a typo in the question. (Why don't people use copy and paste?! ;-) )
The ChildLink is also matched by your selector, and in the click handler you're preventing the default action (which would be "navigate to Google").
So you should adapt your selector to only get the toggle Link, or you use this:
$('.archives ul li a').click(function(e){
if ($(this).siblings('ul').slideToggle().length) // if we found a list to toggle
e.preventDefault(); // or return false
});
Since your return false statement is cancelling the default link action, you need to be more specific so that you don't target the links that want to allow to continue to function.
Try this:
$('.archives > li > a').click(function () {
$(this).parent().find('ul').slideToggle();
return false;
});
jsFiddle example
By using the > child selector and changing the target to only the immediate child links of the outermost list, the sublinks won't be selected and will continue to work. In your code your $('.archives ul li a') will apply to any child links, not just the top level.
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