On a form, I have to select all first <a> elements with a specific attribute value from all the list items present in the form. For instance, in the below code, I have to select <a> elements with the content xxx and zzz — or in other words, the first <a> element with data-role="modal" from all list items.
console.log($('ul li a[data-role="modal"]:first'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a data-role="modal">xxx</a>
<a data-role="modal">yyy</a>
</li>
<li>
<a>abc</a>
<a data-role="modal">zzz</a>
<a data-role="modal">xyz</a>
</li>
</ul>
The jQuery I tried is only selecting the one with xxx.
You can use .find() to get all a elements with attribute data-role=modal in ul li and apply :eq to get first for each match:
$('ul li').find('a[data-role="modal"]:eq(0)').css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a data-role="modal">xxx</a>
<a data-role="modal">yyy</a>
</li>
<li>
<a>abc</a>
<a data-role="modal">zzz</a>
<a data-role="modal">xyz</a>
</li>
</ul>
References
.find()
:eq
Check this
$('document').ready(function(){
$('ul li').each(function(){
$(this).find('a[data-role=modal]:first').css('background-color','red');
});
});
I guess this may help
$('document').ready(function(){
$('ul li').each(function(){
$(this).find('a[data-role="modal"]').first().css('background-color','red');
});
});
Try:
$('ul li').find('a[data-role="modal"]:first')
console.log( $('ul li').find('a[data-role="modal"]:first').map(function() {
return $(this).text();
}).get() );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<a data-role="modal">xxx</a>
<a data-role="modal">yyy</a>
</li>
<li>
<a>abc</a>
<a data-role="modal">zzz</a>
<a data-role="modal">xyz</a>
</li>
</ul>
Related
I have list item
<ul class="menu">
<li> LIST 1 </li>
<li> LIST 2 </li>
<li> LIST 3 </li>
</ul>
<div class="append_li"></div>
So suppose when I click on <li>LIST 1</li> remaining li with tags should get appended in div tag but not clicked li, so how to do this using jQuery
You can use jQuery .clone() for this purpose:
$(document).ready(function(){
$('li').click(function(){
//$('.append_li').html('');
$('.append_li').html($('li').not($(this)).clone());
});
});
Working snippet:
$(document).ready(function(){
$('li').click(function(){
//$('.append_li').html('');
$('.append_li').html($('li').not($(this)).clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li> LIST 1 </li>
<li> LIST 2 </li>
<li> LIST 3 </li>
</ul>
<div class="append_li"></div>
Note: If you want to replace data inside <div> instead of append, then add below line in your code before .clone() line
$('.append_li').html('');
Important:- What every-one talks about invalid HTML, You can overcome to that problem by doing below code:
$(document).ready(function(){
$('li').click(function(){
$('.append_li').html('');
$('.append_li').html($("ul.menu").clone().find('li:eq('+ $(this).index() +')').remove().end());
})
})
Output: http://jsfiddle.net/0mz9s8ng/
You can use like this:
$('.menu li').click(function (){
$(this).siblings('li').clone().appendTo('.append_li')
});
OR Like this
$('.menu li').click(function (){
$(this).siblings('li').appendTo('.append_li')
});
I want to get the index of a group of elements (in this example, the a tags with the class myLink). They are nested within parent elements. All my efforts thus far produce a 0 index for the first item, but a -1 index for the second. An example of the structure I'm looking at is:
// GeekInTheBox - please fill this out
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="containerOne">
<ul class="listOne">
<li>
<a class="myLink" href="blah">Link Text</a>
</li>
<li>
<a class="myLink" href="moreBlah">More Link Text</a>
</li>
</ul>
</div>
<script>
$('.myLink').on('click', function(){
alert($(this).index($('.myLink')));
alert($(this).index($('.containerOne .listOne a')));
alert($(this).index($('.containerOne .listOne li a')));
alert($(this).index($('.containerOne .listOne .myLink')));
alert($(this).index($('.containerOne .listOne li .myLink')));
alert($(this).index($('.containerOne .listOne a.myLink')));
alert($(this).index($('.containerOne .listOne li a.myLink')));
alert($(this).index());
return false;
})
</script>
You should call .index() on a collection of items (such as $('.myLink')), and pass this as an argument - then you'll get the index of this within the collection
// GeekInTheBox - please fill this out
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="containerOne">
<ul class="listOne">
<li>
<a class="myLink" href="blah">Link Text</a>
</li>
<li>
<a class="myLink" href="moreBlah">More Link Text</a>
</li>
</ul>
</div>
<script>
$('.myLink').on('click', function(){
alert($('.myLink').index(this));
return false;
})
</script>
I'm wondering if anyone could explain to me what is going on here?
var testNo = $("#test").text()
$("ul li a").click(function() {
$("#test").text($(this).text());
console.log(testNo)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
1
<ul>
<li>
<a href="#" >1</a>
</li>
<li>
2
</li>
<li>
<a href="#" >3</a>
</li>
</ul>
</li>
</ul>
It is strange to me why this wouldn't update the list item as you click using this method. However, if you change the javascript to;
$("ul li a").click(function() {
var testNo = $("#test").text()
$("#test").text($(this).text());
console.log(testNo)
})
It shows the value as one behind, but set the following as;
$("ul li a").click(function() {
$("#test").text($(this).text());
var testNo = $("#test").text()
console.log(testNo)
})
and it has the desired behaviour.
Is there a way to achieve what this last code snippet gives me, but by using the first code format?
Let me know something doesn't make sense,
thanks
You need to update the testNo variable text, then only it will show the latest text. Try:
var testNo = $("#test").text()
$("ul li a").click(function() {
testNo = $(this).text();
$("#test").text($(this).text());
console.log(testNo)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<ul>
<li>
1
<ul>
<li>
<a href="#" >1</a>
</li>
<li>
2
</li>
<li>
<a href="#" >3</a>
</li>
</ul>
</li>
</ul>
It's all about when you get the value of the $('#test').text() -- because you then go on to change the source value.
Your code does two things: (1) It reads #test and stores its value as testNo, and (2) it gets the text from the clicked anchor tag and puts that value into #test. So two things change: the var testNo and #test.
If you save the value of #test as var testNo, then change the value of #test before displaying testNo, they will have different values.
I think what you want to do is this:
$("ul li a").click(function() {
var testNo = $(this).text()
$("#test").text(testNo);
console.log(testNo)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
1
<ul>
<li>
<a href="#" >1</a>
</li>
<li>
2
</li>
<li>
<a href="#" >3</a>
</li>
</ul>
</li>
</ul>
In your first code testNo is set globally and take the value at page load in the second and 3th it is set locally so the value changes at each click event ,
In the second the value is incremented before the text is change so it captures the previous altered value, the 3th the value is saved after the text is saved so testNo is display the updated value
I have HTML Structure like
<ul>
<li><a></a>
<ul>
<li><a></a>
<ul>
<li><a></a>
<ul>
<li><a></a></li>
</ul>
</li>
</ul>
</li>
</ul>
I want to add 'active' class for relevant 'a' Element when corresponding li clicked.
$('#a').on('click', function(){
$('a', this).addClass('active');
});
<ul>
<li id="a"><a></a>
<ul>
<li id="b"><a></a>
<ul>
<li id="c"><a></a>
<ul>
<li id="d"><a></a></li>
</ul>
</li>
</ul>
</li>
</ul>
Use children() method, since you only want to select the direct child
$('li').click(function(){
$(this).children('a').addClass('active')
})
or use > to select direct child
$('li').click(function(){
$('>a', this).addClass('active')
})
A delegate click handler would most likely solve your problem best.
$('ul.master').on('click', 'li', function (evt) {
evt.stopPropagation();
// I added this line to remove active class from all other a tags
$(this).parents('ul.master').find('a').removeClass('active');
$(this).children('a').addClass('active');
});
See this jsfiddle
You could work on the <a> tag directly to capture the click for changing the active class. If you need to work directly with the <li> You can attach another handler.
$('a').click(function(evt){
$(this).addClass('active');
});
$('li').click(clickHandler);
You mean something like this?
$('li').on('click', function(){
$('a', this).addClass('active');
});
just target the li a directly:
$('li a').on('click', function(){
$(this).addClass('active')
});
$('li').on('click', function(){
$(this).closest('a').addClass('active');
});
Get first child using :first (if you have only one anchor per li) the use addclass method to assign class
I fixed your HTML:
<ul>
<li>
<a>A</a>
<ul>
<li>
<a>B</a>
<ul>
<li>
<a>C</a>
<ul>
<li>
<a>D</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
jQuery + JS code:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$('a').click(function(){
$(this).parent('li').addClass('active')
})</script>
$(document).on('click', 'a', function(){
if($(this).parent('li').length) {
$(this).parent('li').addClass('active');
}
});
I wish to find an easy jQuery solution to iterate through a list's child selectors, in this instance, the ul > li span span child selectors, find the text, copy the text as the list item ID, all while removing the whitespace and replacing with underscore if there are any (for instance, in the example below, HR Area would become HR_Area then get added as the list item ID as li id="HR_Area").
<ul id="menu">
<li><span class="additional-background"><span class="menu-item">Staff</span></span>
<ul>
<li>Directory</li>
</ul>
</li>
<li><span class="additional-background"><span class="menu-item">HR Area</span></span>
<ul>
<li>Manage Vacation Time</li>
</ul>
</li>
</ul>
Thx in advance.
This will select only the immediate li inside #menu.
I hope this is what you expected.
$(document).ready(function() {
$("#menu>li .menu-item").each(function() {
$(this).closest("li").attr("id", $(this).text().split(' ').join('_'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
<li>
<a href="/">
<span class="additional-background">
<span class="menu-item">Staff</span>
</span>
</a>
<ul>
<li>Directory
</li>
</ul>
</li>
<li>
<a href="/">
<span class="additional-background">
<span class="menu-item">HR Area</span>
</span>
</a>
<ul>
<li>Manage Vacation Time
</li>
</ul>
</li>
</ul>
Just iterate over the immediate child which is an li.
Then access the span and replace the spaces with underscore and set the id accordingly.
// Iterate over the immediate li elements for the ul
$('#menu > li').each(function(elem) {
var $this = $(this);
// Access the span element
var $span = $('.menu-item', $this),
spanText = $span.text(),
// Replace space with underscore
replacedText = spanText.split(' ').join('_');
// Set the id of for the li element
$this.attr('id', replacedText);
});
$('#menu > li').each(function(elem) {
console.log($(this).attr('id'));
});
Check Fiddle
Try This:-
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#menu").find("li").each(function(){
$(this).find("span").each(function(){
var txt = $(this).html();
txt = txt.replace(" ","_");
$(this).closest("li").attr("ID",txt);
});
});
});
</script>
</head>
<body>
<ul id="menu">
<li><span class="additional-background"><span class="menu-item">Staff</span></span>
<ul>
<li>Directory</li>
</ul>
</li>
<li><span class="additional-background"><span class="menu-item">HR Area</span></span>
<ul>
<li>Manage Vacation Time</li>
</ul>
</li>
</ul>
</body>
</html>