javascript - 为 li 和 ul li 设置不同的 标签(嵌套)

Question

我真的需要解决这个问题...我已经这样做太久了。

我想我需要获取每个<a>的innerText元素并将其放入 li_text 变量中。

以下是该主题的“提供”代码。该主题不支持子菜单。但我需要这个，所以我试图让它与子菜单一起工作。

以下 js 脚本部分“构建”了 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>' )
    } );

好像是这段代码:li_text = $this_li.find('a').html();从上面。需要调整....我需要该行从上面最接近的父级中获取“a”......这有意义吗？

与此一起(来自 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 )   );}

导航 HTML 如下所示:

<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>

等等...

**

这就是我想要得到的......

              <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>

这些“名称”是通过 js 中的 li_text 函数插入的。但它似乎只插入了第一个 li 名称。

我需要脚本从其“自己的”/父目录中获取页面名称。并且仍然应用 js 脚本....

**

希望有人能帮忙......

谢谢

Answer 1

就我个人而言，我讨厌使用 html()填充 HTML 片段。我更喜欢创建元素并将它们附加到 DOM。您最终可以更好地控制和理解自己正在做的事情。

$("#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.
    }
);

(如果您发布更多关于您最终期望的代码，我可以为您提供更多关于我在这里的意思的细节......)

除此之外，您可能还会遇到其他问题，因为您的 HTML 格式不正确。您关闭您的<a>标记两次，并且您不会关闭 <li>标签。另外，您不会关闭 <span>标签，因为你的尖括号之一是相反的( >/span> )。如果处理不当，jQuery 将很难解析 HTML 元素。