<span>为li和ul li</span>设置不同的<span>标签（嵌套）</span>

Question

I really need to nail this... I've been at it way too long now.

I think I need to get the innerText of each <a> element and put it into li_text variable.

The following is the 'supplied' code for this theme. The theme does not support submenus. BUT I need this so I'm trying to make it work with submenus.

The following js script is partly 'building' the HTML.

var$ $main_menu = $('#main_menu');

  $main_menu.find('li').each( function(){
    var $this_li = $(this),
li_text = $this_li.find('a').html();

$this_li.find('a').html( '<span class="main_text">' + li_text + '</span>' + '<span class="menu_slide">' + li_text + '</span>' )
    } );

It seems that it's this piece of code: li_text = $this_li.find('a').html(); from the above. that needs to tweaking.... I need that line to take the 'a' from it's closest parent above..... does this make sense?

together with this (from header.php)

$primaryNav = '';
  if (function_exists('wp_nav_menu')) {
    $primaryNav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '',  'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => $menuID, 'echo' => false )   );}

The navigation HTML comes out like this:

<nav id="main_menu" style="opacity: 1; display: none;">
  <ul id="menu-dk-fl370" class="clearfix">
    <li id="menu-item-23" class="mcdu_left menu-item menu-item-type-post_type menu-item-object-page menu-item-23 even">
    <li id="menu-item-48" class="mcdu_right menu-item menu-item-type-post_type menu-item-object-page menu-item-48 odd">
    <li id="menu-item-27" class="nolink menu-item menu-item-type-custom menu-item-object-custom menu-item-27 even">
    <li id="menu-item-55" class="has_sub mcdu_right menu-item menu-item-type-post_type menu-item-object-page menu-item-55 odd">
      <a href="http://fl370.com/?page_id=53">
        <span class="main_text">MEDIA</span>
        <span class="menu_slide">MEDIA</span>
      </a>
        <ul id="sub-menu" class="sub-menu" style="display: none;">
          ***<li id="menu-item-67" class="mcdu_sub mcdu_right menu-item menu-item-type-post_type menu-item-object-page menu-item-67">
            <a href="http://fl370.com/?page_id=60">
              <span class="main_text">
                <span class="main_text">MEDIA</span>
                <span class="menu_slide">MEDIA</span>
              </span>
              <span class="menu_slide">
                <span class="main_text">MEDIA</span>
                <span class="menu_slide">MEDIA</span>
              </span>
            </a>
         </li>***
         <li id="menu-item-66" class="mcdu_sub mcdu_right menu-item menu-item-type-post_type menu-item-object-page menu-item-66">
      </ul>
   </li>
  </ul>
</nav>

and so on...

**

THIS IS WHAT IM TRYING TO GET....

              <span class="main_text">
                <span class="main_text">BILLEDER</span>
                <span class="menu_slide">BILLEDER</span>
              </span>
              <span class="menu_slide">
                <span class="main_text">VIDEO</span>
                <span class="menu_slide">VIDEO</span>
              </span>

These 'names' is inserted via the li_text function in js. But it seems it's inserting only the first li a name.

I need the script to take the page name from its 'own'/parent li a. AND still apply the js script....

**

Hope someone can help....

Thanks

Answer 1

Personally, I hate using html() to populate snippets of HTML. I much rather prefer creating the elements, and appending them to the DOM. You end up with more control and understanding of what you're doing.

$("#main_menu li").each( 
    function(i, element)
    {
        $("<a />").attr("href", "some link here").appendTo(element);
        $("<span />").addClass("class name here").text("some text here").appendTo(element);
        // ...etc.
    }
);

(If you post a little more about what code you're expecting in the end, I can give you more specifics about what I mean here...)

That aside, you're probably having extra issues because your HTML is malformed. You close your <a> tag twice, and you don't close your <li> tag. Also, you don't close a <span> tag, because one of your angle brackets is reversed ( >/span> ). jQuery is going to have a tough time dissecting the HTML elements if they're not done properly.

Answer 2

If your code structure stays as it is then you can grab that content by doing this. I am assuming you can't use the class names or IDs

$main_menu.find('> ul > ul').html();

or

$('#main_menu > ul > ul').html();

this will return everything inside of the ul but not the ul itself, so you need to create it and add it.

var container_ul = '<ul class="' + $main_menu.find('> ul > ul').attr("class") + '" id="' + $main_menu.find('> ul > ul').attr("id") + '">';

define container_ul outside of the loop, so the final thing would look something like this

var $main_menu = $('#main_menu');
var container_ul = '';
var final_content = '';

$main_menu.find('> ul > ul').each( function(){
    container_ul = '<ul class="' + $(this).attr("class") + '" id="' + $(this).attr("id") + '">';
    li_text = $(this).html();
    final_content += container_ul + li_text + '</ul>';
});

so final_content will have the block of code you want, from here you can decide what to do with that block of code. Probably not the prettiest way to get the content but it should work