Question

我需要添加类或从内容中添加相同的类名。这是一个例子。

<ul>
  <li>
    <a href="#">men</a>
    <ul>
      <li><a href="#">new arrival</a></li>
      <li><a href="#">about</a></li>
    </ul>
  </li>
  <li>
    <a href="#">top 2nd menu</a>
    <ul>
      <li><a href="#">go</a></li>
      <li><a href="#">hello menu</a></li>
    </ul>
  </li>
</ul>

这是我想要的最终结果onload：

<ul>
  <li class="men">
    <a href="#">men</a>
    <ul>
      <li class="new-arrival"><a href="#">new arrival</a></li>
      <li class="about"><a href="#">about</a></li>
    </ul>
  </li>
  <li class="top-2nd-menu">
    <a href="#">top 2nd menu</a>
    <ul>
      <li class="go"><a href="#">go</a></li>
      <li class="hello-menu"><a href="#">hello menu</a></li>
    </ul>
  </li>
</ul>

Answer 1

为了实现这一点，您可以在替换addClass()的空格后，为text()方法提供函数，该方法返回a元素的-。试试这个：

＆＃13;

$('li').addClass(function() {
  return $(this).children('a').text().replace(/\s/g, '-');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#">men</a>
    <ul>
      <li><a href="#">new arrival</a></li>
      <li><a href="#">about</a></li>
    </ul>
  </li>
  <li>
    <a href="#">top 2nd menu</a>
    <ul>
      <li><a href="#">go</a></li>          
      <li><a href="#">hello menu</a></li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

试试这个：

$("ul li a").each(function (a, b) {           
       $(this).parent().addClass(b.text.replace(/\s/g, '-'));
});

Answer 3

你可以用一点JQ做到这一点。

A。首先，您需要找到与text对应的a每个li表单。

要使用text()函数（info here）

B。然后，如果您有text个单词，则需要使用join方法- replace()个单词top 2nd menu的（info here）

这是因为如果你没有加入单词（在＆＃34; - ＆＃34;之间），例如对于文本li，则replace()将有3个单独的类而不是只有一个。因此，使用top-2nd-menu方法分别获得所需结果li

C。，然后使用attr("class","nav-" + addcl) addcl（info here）
将课程添加到$("li").each(function(){ var litext = $(this).children("a").text() var addcl = litext.replace(/\s/g, '-').toLowerCase() $(this).attr('class', 'nav-' + addcl); })
这样你可以在从A点和B点得到的文本（<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a href="#">men</a> <ul> <li><a href="#">new arrival</a></li> <li><a href="#">about</a></li> </ul> </li> <li><a href="#">top 2nd menu</a> <ul> <li><a href="#">go</a></li> <li><a href="#">hello menu</a></li> </ul> </li> </ul>）之前添加你想要的任何单词

＆＃13;
＆＃13;
<UserControl.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/MHToolkit;component/StylesTemplates/CardviewStyle.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary>
＆＃13;
<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/MHToolkit;component/StylesTemplates/CardviewStyle.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary>
＆＃13;
＆＃13;
＆＃13;

如何使用相同的内容在li和ul上附加类？

3 个答案: