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 a中获取页面名称。并仍然应用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>）。如果HTML元素没有正确完成，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将包含你想要的代码块，从这里你可以决定如何处理这段代码。可能不是获取内容的最漂亮的方式，但它应该工作

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

2 个答案: