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

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 一个名字。

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

**

希望有人能帮忙....

谢谢

Answer 1

就个人而言，我讨厌使用html() 来填充 HTML 的 sn-ps。我更喜欢创建元素，并将它们附加到 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 元素。

Answer 2

如果您的代码结构保持不变，那么您可以通过执行此操作来获取该内容。我假设您不能使用类名或 ID

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

或

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

这将返回 ul 内的所有内容，但不返回 ul 本身，因此您需要创建并添加它。

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

在循环之外定义 container_ul，所以最后的东西看起来像这样

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>';
});

因此 final_content 将拥有您想要的代码块，您可以从这里决定如何处理该代码块。可能不是获取内容的最漂亮方式，但它应该可以工作