Question

这真让我疯了！我不是真正的开发者，但必须有一个简单的方法来实现我想要的东西。我正在研究这个问题好几个小时，但也许一些熟练的人可以帮助我。

情况：

我有一个嵌套的UL列表，在子菜单中有标题（h3 class =“subMenuHeader”）。

每个带有“subMenuHeader”类的h3都应填充前一个锚文本的链接名称（例如“Foo”）。

如何运作

<ul> <!-- First Level -->
  <li>
    <a> Foo </a>

    <ul> <!-- Second Level -->
      <h3 class="subMenuHeader"> Foo </h3>
      <li>
        <a> Bar </a>

        <ul> <!-- Third Level -->
          <h3 class="subMenuHeader"> Bar </h3>
          <li>
            <a>Whoop</a>
          </li>
        </ul>

      </li>
    </ul>

  </li>
</ul>

我已经尝试了所有组合来选择“.subMenuHeader”类前面的（a）-Tag，但我的逻辑似乎存在严重问题。

作为一个真正的jQuery-Noob，我尝试过这样的事情：

var x = jQuery(".subMenuHeader").closest('ul').parent('li').find('a').text();

jQuery('.subMenuHeader').text(x);

但正如你所看到的，这种无法实现的效果。它实际上显示了任何（a）的所有文本都遵循该选择，它不会减少/规范内容，它在DOM中的深度越深。我总是最终得到一个巨大的（a）-texts ......

任何想法???

Answer 1

您可以使用closest()获取第一个li父级，然后使用a和find()

将:first内部定位

＆＃13;

$('.subMenuHeader').each(function() {
  $(this).text($(this).closest('li').find('a:first').text())
})

＆＃13;

h3 {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul> <!-- First Level -->
  <li>
    <a> Foo </a>
    <ul> <!-- Second Level -->
      <h3 class="subMenuHeader"></h3>
      <li>
        <a> Bar </a>
        <ul> <!-- Third Level -->
          <h3 class="subMenuHeader"></h3>
          <li>
            <a>Whoop</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

调整它的几种方法：

使用first

＆＃13;

    var x = jQuery(".subMenuHeader").closest('ul').parent('li').find('a:first').text();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul> <!-- First Level -->
  <li>
    <a> Foo </a>

    <ul> <!-- Second Level -->
      <h3 class="subMenuHeader"> Foo </h3>
      <li>
        <a> Bar </a>

        <ul> <!-- Third Level -->
          <h3 class="subMenuHeader"> Bar </h3>
          <li>
            <a>Whoop</a>
          </li>
        </ul>

      </li>
    </ul>

  </li>
</ul>

＆＃13;

使用prev()或siblings()获取ul的先前兄弟

＆＃13;

var x = jQuery(".subMenuHeader").closest('ul').prev('a').text();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul> <!-- First Level -->
  <li>
    <a> Foo </a>

    <ul> <!-- Second Level -->
      <h3 class="subMenuHeader"> Foo </h3>
      <li>
        <a> Bar </a>

        <ul> <!-- Third Level -->
          <h3 class="subMenuHeader"> Bar </h3>
          <li>
            <a>Whoop</a>
          </li>
        </ul>

      </li>
    </ul>

  </li>
</ul>

＆＃13;

Answer 3

你应该试试这个.........

jQuery('.subMenuHeader').each(function() {
    $(this).html($(this).parent().siblings('a').html());
});

（如果想在页面加载后更改内容，则如下所示）

jQuery(function(){
        jQuery('.subMenuHeader').each(function() {
            $(this).html($(this).parent().siblings('a').html());
        });
    });

jQuery：在堆叠的UL中选择父级兄弟元素

3 个答案: