I have the following code
<div>
test
<ul>
<li class="action_li">1</li>
<li class="action_li">2</li>
</ul></div> <div>
test
<ul>
<li class="action_li">3</li>
<li class="action_li">4</li>
</ul>
and I want to loop on all the <li> that are enclosed with the same <div> as the clicked <a>
$("a.clickMe").live("click", function(eve){
eve.preventDefault();
$('.action_li').each(function(index) {
console.debug(this);
});
});
but of course this will get me all the 4 <li> not the two enclosed
so I want to have something that starts with $(this) and ends with .each()
There are many ways, examples:
$(this).parent().find("li.action_li").each(function(index) {
console.debug(this);
});
or:
$(this).next("ul").children("li.action_li").each(function(index) {
console.debug(this);
});
etc.
This should work:
$("a.clickMe").live("click", function(eve){
eve.preventDefault();
$('.action_li', $(this).parent()).each(function(index) {
console.debug(this);
});
});
Second parameter next to the selector will limit the search to only part of the DOM tree, in this part to the one div which is parent for a element.
You need to get the <ul> element that is a sibling of the <a>, then get its children.
For example:
$(this).siblings('ul').children('li.action_li').each(function(index) {
//...
});
You could also call $(this).next() or $(this).nextAll('ul').
This might work:
$(this).parents('div').find('li').each(...
Related
Having some problems with jQuery methods - perhaps overcomplicating things...
What I need to find is if any of the li elements classes contain the word 'current', then if they do, append the word active to them.
I'm struggling to add the word to the end of the current class. For example:
Markup:
<div class="menu-navigation-container">
<ul>
<li class="current_page_item menu-item-8787"><span>The Magazine</span>
</li>
<li class="menu-item menu-item-type-post_type"><span>Snapped</span>
</li>
</ul>
</div>
jQuery:
$(document).ready(function () {
var classNames = $('.menu-navigation-container ul li').attr("class").match(/[\w-]*current[\w-]*/g);
$(classNames).each(function () {
$(this).addClass("active");
});
});
Running classnames; up in the console produces just the string - I want it to reference the li elemens that have the word 'current' in their class names, then append the word 'active' at the end.
Can I do this with jQuery's attribute contains selector?
Simply like this :
$(document).ready(function () {
$('.menu-navigation-container ul li[class*=current]').addClass('active');
});
Try this
$(document).ready(function () {
$('.menu-navigation-container ul li').each(function(){
if ( $(this).is(".current") )
{
$(this).addClass("active");
}
})
});
The following is my dropdown list.
<ul id="navBar" data-value="">
<li data-city-value="blore">Bangalore
<ul>
<li data-city-value="delhi">Delhi</li>
<li data-city-value="che">Chennai</li>
<li data-city-value="jaipur">Jaipur</li>
<li data-city-value="hyd">Hyderabad</li>
<li data-city-value="mum">Mumbai</li>
<li data-city-value="pune">Pune</li>
</ul>
</li>
</ul>
And the following are my methods I tried to access the data-city-value attribute.
Method 1)
var cityName = document.getElementById('navBar');
var city = cityName.getAttribute('data-city-value');
alert(city);
It alerts "null"
Method 2)
var cityName = document.getElementById('navBar');
var city = cityName.dataset.cityValue;
alert(city);
It alerts "undefined".
Method 3)
$('#navBar li').click(function() {
$(this).parent().data('value', $(this).data('cityValue'));
});
alert($('#city').data('value'));
It alerts "undefined".
I checked the syntax to get data value here
It would be of great help if you can help me find where I am doing mistake.
Thanks. :)
IN your first two methods you target the top ul with id navBar. In the third method you do $(this).parent() which again takes you to the ul element.
That element does not have the data-city-value attribute.
The jquery method should be
$('#navBar').on('click','li', function(e) {
var city = $(this).data('city-value');
alert(city);
return false;
});
Demo at http://jsfiddle.net/gaby/Mb7KS/
As pointed out by Gaby, you need to reach the element firts. Try this:
$('#navBar:first-child')
This is how you can iterate through your data-city-value attributes:
$('li[data-city-value]').each(function(index,element){
alert($(element).data('city-value'));
});
You can also check my jsFiddle example.
For click events:
$(document).ready(function()
{
$('li').click(function() {
alert($(this).data('city-value'));
return false;
});
});
You should return false because the top li element has inner elements and it was triggering inner li element click event.
My second jsFiddle demo.
I want to get the values of items in a Dynamically generated DOM using DOMNodeInserted.
Here is my code.The items #I want to get the values are li eg
<div id="demo">
<ul>
<li class="req">Chemistry</li>
<li class="req">English</li>
<li class="req">Maths</li>
</ul>
</div>
Here is the code
$('#demo').on('DOMNodeInserted', function(e) {
var that = $(this);
if ($(e.target).is('.req')) {
alert(oneoftheitemsintheli);
}
});
I want to get on of the items in the li eg Maths, Chemistry etc. I need to know how to get the items.
Thanks
Given that each li has the class req, you can use each to iterate over them and get the text value - or any other property you need.
$('#demo').on('DOMNodeInserted', function(e) {
$('.req').each(function() {
alert($(this).text());
});
});
Example fiddle
This code move elements inside other elements to create a tree hierarchy.
<ul>
<li id="task_111" class="task"><a>task1</a></li>
<li id="task_222" data-in-task-group-id="333" class="task"><a>task3</a></li>
<li id="task_333" class="task task_group">
<a>task2</a>
<ul data-task-group-id="333" class="task_group_list"></ul>
</li>
<li id="task_444" data-in-task-group-id="333" class="task task_group">
<a>task4</a>
<ul data-task-group-id="444" class="task_group_list"></ul>
</li>
<li id="task_555" data-in-task-group-id="333" class="task"><a>task5</a></li>
</ul>
Loop that moves the elements:
$('li').each(function() {
task_group_id = $(this).attr('data-in-task-group-id');
if (task_group_id) {
$("li#task_" + task_group_id + " .task_group_list").append($(this));
}
})
All looks pretty simple but one element (task5) is copied wrong:
As you see task5 is placed inside two parent elements: the correct parent is task2, task4 should be empty.
Why is task5 is copied wrong inside task4?
JSfiddle to play around.
What happens is that task4 - including its <ul> element with a class of task_group_list - is moved into task3. Then, when it's the turn of task5 to be moved, there are multiple elements that match this selector:
li#task_333 .task_group_list
As stated in the doc for append:
The .append() method inserts the specified content as the last child of each element in the jQuery collection
Since you have multiple elements you get task5 appended to each of them, cloning the element as necessary.
You'll want to change your selector so that it only matches the <ul> that's an immediate child, rather than a descendent, of that <li> element:
li#task_333 > .task_group_list
The code for the loop would become:
$('li').each(function() {
task_group_id = $(this).attr('data-in-task-group-id');
if (task_group_id) {
$("li#task_" + task_group_id + " > .task_group_list").append($(this));
}
})
Updated jsFiddle
How can I delete list element if it has a child link of some defined id ? So looking at the code below I'd like to find a <li> with <a> of id=link1 and delete this li.
<li class="nav-tab">
Component
</li>
I've tried the code below but it doesn't work :
$(function() {
$('.nav-tab:has(#link1)').css('display', 'none');
});
Your question and your code contradict each other, so I'll provide answers for both cases.
If you want to remove a <li class="nav-tab"> that contains a child <a href="#link1">:
$(function() {
$('a[href="#link1"]').parent('li.nav-tab').remove();
});
If you want to remove a <li class="nav-tab"> that contains a child <a id="link1">:
$(function() {
$('a#link1').parent('li.nav-tab').remove();
});
You can use an attribute-equals selector and :has() to see if it contains an element matching that...then just call .remove() on that.
$("li:has(a[href='#link1'])").remove()
$(function() {
$(".nav-tab > a[id='yourID']").css('display', 'none');
});
If by anchor :
$(function() {
$(".nav-tab > a[href='yourLink']").css('display', 'none');
});