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

问题描述：

这真是让我疯狂！我不是真正的开发人员，但必须有一个简单的方法来实现我想要的。我正在为此工作数小时，但也许有些技术人员可以帮助我解决这个问题。jQuery：在堆叠的UL中选择父级兄弟元素

情况：

我有在子菜单标题嵌套UL列表（H3类= “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”级的前选择（一） - 标签，但似乎是一个严重的问题在我的逻辑中。

作为一个真正的jQuery的菜鸟我已经试过这样的事情：

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

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

但正如你所看到的，这ulitmately不起作用。它实际上显示任何（a）的所有文本都遵循该选择，并且不减少/特定内容，它在DOM中的深度越大。我总是以（a）文字的巨大字符串结束......

任何想法？

答

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

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

（如果要页面加载然后如下后更改的内容）

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

给这个人一个cookie :-) 工作就像一个魅力！ – Tim

答

您可以使用closest()获得第一li父然后瞄准第一a内侧find()和:first

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

h3 { 
 
    color: red; 
 
}

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

答

几种方法进行调整：

使用first

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

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

使用prev()或siblings()获得UL的前兄弟

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

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

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

相关推荐