I have a list like this
<ul class="example">
<li>Something</li>
<li>Something</li>
</ul>
The result should be like this
<ul class="example">
<li><span></span>Something</li>
<li><span></span>Something</li>
</ul>
Please help me.
Append a span at the beginning using prepend() method.
$('ul.example li a').prepend('<span></span>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="example">
<li>Something</li>
<li>Something</li>
</ul>
You can use each() to loop each a element and change its html. DEMO
$('.example li a').each(function() {
$(this).html('<span></span>' + $(this).text())
})
You can simply do this.
$(".example li a").each(function() {
$(this).html(function(i, origText){
return "<span></span>" + origText;
});
});
Here origText contains existing inner elements. Here is the reference JQuery Tutorial
This method is very useful even when you have lot of content inside a div.
Hope that helps :)
Related
I need to add a line of text to the end of a list. This list can be varying lengths, example:
<div id="characteristics">
<ul>
<li>Words</li>
<li>More words</li>
</ul>
</div>
I wish to target the last item in this list using JS or JQuery and add in my new line.
CSS selector for these are:
#characteristics ul
#characterisitcs ul li
jQuery's append() adds HTML at the end of an element. This should work:
$('#characteristics ul').append('<li>Another item</li>');
Following will add the new li at the end of ul
$("#characteristics ul").append('<li> Your New item</li>');
Alternative solution is use last-child with after. Or append also work which I already mention on question comment.
$('ul li:last-child').after('<li>More words1</li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="characteristics">
<ul>
<li>Words</li>
<li>More words</li>
</ul>
</div>
Try $('#characteristics > ul').append().
var lastLI = $('#characteristics > ul').append('<li>More words words</li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="characteristics">
<ul>
<li>Words</li>
<li>More words</li>
</ul>
</div>
I am facing a problem on getting the nearest parent element attribute value using Jquery. Can anyone help me on this. My element structure is as below,
<ul class="Someclass">
<li><span id=3 class="heading"></span>
<ul>
<li>
<ul> <li><span ><button onclick= "redirect()"></button></span</li>
<ul>
</li>
</ul>
</li>
<ul>
<script type="text/javascript">
function redirect() {
alert(....)
}
</script>
In the above code when i click that element having onclick event i want to get the value as 3 in alert() which is in the element having the class heading. The above code is in for loop so it will have more code like this in a same page.
Give this Try
function redirect(elem) {
alert($(elem).closest('.Someclass > li').children('span').attr('id'))
}
Change Markup to this:
<li><span><button onclick= "redirect(this)"></button></span</li>
this will reffer to the current object in DOM
By wrapping elem in $(elem) will convert it to jQuery object then you can traverse to the closest and find span
You can also filter that span with .children('span:first')
Fiddle Example
With your current code, pass the clicked element reference to the function like
<button onclick= "redirect(this)">asdf</button>
then
function redirect(el) {
alert($(el).closest('.Someclass > li').children('span').attr('id'))
}
Demo: Fiddle
Bu a more recommended way will be is to use jQuery event handlers like
<button class="redirect">asdf</button>
then
jQuery(function($){
$('.Someclass .redirect').click(function(){
alert($(this).closest('.Someclass > li').children('span').attr('id'))
})
})
Demo: Fiddle
This should do it.
alert($(this).closest('.heading').attr('id'));
$(".someclass li").click(function(){
$(this).closet('.heading').attr('id');
})
could you pass it on as a parameter to your redirect function? You'd somehow hold that value in a variable in your loop.
I got a solution if you can change the id and class to parent li
Working Demo
More about parent selector
Jquery
function redirect(elem) {
var myid = $(elem).parents(".heading").attr("id");
alert(myid);
}
HTML
<ul class="Someclass">
<li id="3" class="heading">
<ul>
<li>
<ul> <li><span ><button onclick="redirect(this)" id="haha">Go</button></span</li>
<ul>
</li>
</ul>
</li>
<ul>
I am a newbie in web development. Not sure if it is a dumb question.
<nav class="navigation">
<ul class="navigation-items-container">
<li class="navigation-items">Home</li>
<li class="navigation-items">about</li>
<li class="navigation-items">blog</li>
<li class="navigation-items">contacts</li>
</ul>
/nav>
On hover of each li I want to know its in which children Number of ul.
i.e
On hovering "Home" it should give as children Number 0 and on hovering "blog" it should give children number 2.
As you've included the jQuery tag I'll post a jQuery based answer - if you want a non-jQuery answer let me know:
$(".navigation-items-container li").hover(function(e) {
var index = $(this).index();
});
And FYI your markup is wrong, the anchors should be inside the li tags
The version for your current code (though it should be changed):
$(".navigation-items-container a").hover(function(e) {
var index = $(this).index();
});
Due to the fact that your li elements are within a elements, you should use this:
$(".navigation li").hover(function(){
var index = $(".navigation li").index(this);
alert(index);
});
Here is a working example
Of course, it would be better to have your a elements with the li elements like so:
<li class="navigation-items">Home</li>
That way the li elements will be direct children of the ul element, then you could do this:
$(".navigation li").hover(function(){
var index = $(this).index();
alert(index);
});
Here is a better example
Alternatively, and I am not saying this is better, but you could also use data-* attributes to store the value you want:
<li class="navigation-items" data-myindex="0">Home</li>
with this:
$(".navigation li").hover(function(){
var index = $(this).data("myindex");
alert(index);
});
This has the benefit that you could specify different values if required, such as record IDs for example.
Here is an example
Try this.
$('li').on('mouseover', function(){
console.log($('ul li').index($(this)));
})
Try index()
http://api.jquery.com/index/
$(".navigation ul li").hover(function(e) {
alert($(this).index());
});
More possiblities
this help you
Working Demo http://jsfiddle.net/cse_tushar/7SmfR/
$(".navigation ul li").hover(function() {
alert($(this).index('li'));
});
Correct your markup anchor(a) tag should be enclosed within li tags
<nav class="navigation">
<ul class="navigation-items-container">
<li class="navigation-items">
Home
</li>
<li class="navigation-items">
about
</li>
<li class="navigation-items">
blog
</li>
<li class="navigation-items">
contacts
</li>
</nav>
I have the following html code:
<ul class="dropdown-menu shopping-cart-nav-drpdown">
<li class="item" data-item-id="58">
</li>
<li class="item" data-item-id="100">
</li>
<li class="item last">
View Cart
</li>
</ul>
Inside this shopping-cart-nav-drpdown, how do I find the li that has data-item-id=58? Is it possible to do this without iterating through all the children of ul and use getAttributes?
Sure:
$("li[data-item-id=58]")
And an awesome Demo
Yes, it is possible to do this without iterating through all the children of ul:
$('.shopping-cart-nav-drpdown li[data-item-id="58"]');
FIDDLE DEMO #1
You can also make it dynamic like this:
var data = 58;
$('.shopping-cart-nav-drpdown li[data-item-id="' + data + '"]');
FIDDLE DEMO #2
try this
jQuery( ".shopping-cart-nav-drpdown li" ).each(function(){
if($(this).data('item-id')=="58"){
alert('found');
}
});
How can I select a given li a element so that it is selected by default?
Please refer to this question to see the example that I'm working with...
How can I navigation up and down a ul using two buttons?
Basically I need to select the Patient Test li a item by default.
Try this:
$(function(){
$("#MainMenu li:contains('PATIENT TEST')").click();
});
You could do something like this
$('li a').each(function(){
if($(this).text() == 'PATIENT TEST'){
//do something here
}
});
Example: http://jsfiddle.net/jasongennaro/uuaKH/
Try:
<script type="text/javascript">
$(function() {
$('#MainMenu li > a').eq(0).focus()
});
</script>
set in the loaded html, since the next click will remove and reset the "status", based on the other post
<div id="MainMenu">
<ul>
<li class="menuActive">PATIENT TEST</li>
<li>QC TEST</li>
<li>REVIEW RESULTS</li>
<li>OTHER</li>
</ul>
</div>
I just had to create an ID for each li and then use jQuery addClass and removeClass to swap the classes.
$("#repeatMenuItem").removeClass("active");
$("#deleteMenuItem").removeClass("active");
$("#okMenuItem").addClass("active");