用jQuery环绕链接文本

Question

I would like to dynamically wrap the text in my menu links with spans if the parent element has a certain class.

What I have:

<div class="mt-menu-container block">
    <ul id="menu" class="sf-menu sf-js-enabled">
        <li><a href="#">MenuItem</a></li>
    </ul>
</div>

What I want to do is, if the parent element on line 1 has the class "block" I would like the text "MenuItem" in the to be wrapped with spans so I get something like this:

<div class="mt-menu-container block">
    <ul id="menu" class="sf-menu sf-js-enabled">
        <li><a href="#"><span>MenuItem</span></a></li>
    </ul>
</div>

What I tried is (Please don't laugh):

// Menu Block Style
if (jQuery('mt-menu-container.block')) {
   $('#menu > li > a').each(
       function(){
           $(this).wrap('<span></span>');
       });
}

Which didn't work since it's probably wrong on so many levels but you'll get the gist of it

Answer 1

JQuery has the hasClass function. So to verify it an element has a certain class just use:

$('.mt-menu-container').each(function(){
  if($(this).hasClass('block')) {
    $(this).find('a').each(function(){
      $(this).wrapInner('<span></span>');

    });      
  }
});

Answer 2

试试： if (jQuery('mt-menu-container').hasClass('.block'))不是if (jQuery('.mt-menu-container.block'))