Solved

append <span> to <li> not working

Posted on 2010-09-23
7
542 Views
Last Modified: 2012-06-27
I have:

<ul class="sideMenu">
<li><a href="">News Item #2</a></li>
<li><a href="">News Item #1</a></li>
</ul>

I want this:

<ul class="sideMenu">
<li><span><a href="">News Item #2</a></span></li>
<li><span><a href="">News Item #1</a></span></li>
</ul>

My code (but doesnt work)

$("#sideMenu li").each(function()
{
            $("#sideMenu li").append($("</span>"));
});

Also, I would like to add 'class="act"' to the <li> tag for the active <a href>

My code (again not working)

$("#sideMenu li a").each(function()
{
     if(location.pathname.indexOf(this.href) > -1)
     {
       $("#sideMenu li").addClass("act");
     }
});
0
Comment
Question by:ellandrd
  • 4
  • 2
7 Comments
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
change this
$("#sideMenu li").each(function()
{
            $("#sideMenu li").append($("</span>"));
});

to

$("#sideMenu li").each(function()
{
            $("#sideMenu li").append("</span>");
});


also this
$("#sideMenu li a").each(function()
{
     if(location.pathname.indexOf(this.href) > -1)
     {
       $("#sideMenu li").addClass("act");
     }
});

should be
$("#sideMenu li a").each(function()
{
     if(location.pathname.indexOf(this.href) != -1)
     {
       $(this).parent().addClass("act");
     }
});
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
Comment Utility
ohh, after reading the question again,
change
$("#sideMenu li").each(function()
{
            $("#sideMenu li").append($("</span>"));
});

to
$("#sideMenu li").each(function()
{
   var innerHTML = $(this).html();
   $(this).html("<span>" + innerHTML + "</span>" ));
});


0
 
LVL 16

Author Comment

by:ellandrd
Comment Utility
Have you tested this? As it doesnt work for me...
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
check the last reply also
0
 
LVL 16

Author Comment

by:ellandrd
Comment Utility
Thank you!
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
thanks for the points
0
 
LVL 22

Expert Comment

by:kadaba
Comment Utility
Just few pointers:

$("#sideMenu li") should be  $(".sideMenu li"). since you have used it as a class and not an ID. It would work well if you have the Id for that (I dint see it in the post though)

$("#sideMenu li a").each(function()
{
      if(location.pathname.indexOf(this.href) != -1)
     {
        $(this).parent().addClass("act");
     }
});

would it work... it could if you use this function before changing the html to append span

So it could have been this way

$(".sideMenu > li > span > a").each(function()
{
       if(location.pathname.indexOf($(this).attr("href")) != -1)
     {
         $(this).parent().parent().addClass("act");
     }
});

Best,
kadaba
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now