Question

如何检查父级是否具有与其子级相同的文本，如果是，请为此子级添加一个类？

HTML

<ul>
  <li><a class="class1" href="#">MY TEXT</a>
     <ul>
       <li><a class="class2" href="#">IPSUM</a></li>
       <li><a class="class2" href="#">MY TEXT</a></li>
       <li><a class="class2" href="#">LOREM</a></li>
     </ul>
  </li>
</ul>

的jQuery

$(".class2").each(function() {
   if($(".class1").text() == $(".class2").text()) {
      $(this).addClass("current");
   }
});

Answer 1

试试这个!!!我想这就是你想要的。

<ul class="parentUl">
 <li><a class="class1" href="#">MY TEXT</a>
   <ul class='childUl'>
      <li><a class="class2" href="#">IPSUM</a></li>
     <li><a class="class2" href="#">MY TEXT</a></li>
     <li><a class="class2" href="#">LOREM</a></li>
  </ul>
  </li>
  <li><a class="class3" href="#">LOREM</a>
     <ul class='childUl'>
         <li><a class="class4" href="#">IPSUM</a></li>
         <li><a class="class4" href="#">MY TEXT</a></li>
         <li><a class="class4" href="#">LOREM</a></li>
     </ul>
  </li>
</ul>



 $('ul.parentUl>li').each(function(i, item){ 
     $(item).find('ul>li').each(function(){
        if($(this).find('a').text() === $(item).children('a').text()){
           $(this).find('a').addClass('current');
       }
     });
  });

http://jsfiddle.net/ak58ph16/9/

Answer 2

将jQuery更新为

$(".class2").each(function() {
   if($(".class1").text() == $(this).text()) {
      $(this).addClass("current");
   }
});

Answer 3

可以使用.filter()：

$(".class2").filter(function(){
    return $(this).text() === $(".class1").text();
}).addClass("current");

jsFiddle

Answer 4

您还可以使用addClass回调

＆＃13;

$('.class2').addClass(function() {
  return $(this).text() === $('.class1').text() && 'current';
});

＆＃13;

.current {
  color: red;
}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
  <li><a class="class1" href="#">MY TEXT</a>
    <ul>
      <li><a class="class2" href="#">IPSUM</a>
      </li>
      <li><a class="class2" href="#">MY TEXT</a>
      </li>
      <li><a class="class2" href="#">LOREM</a>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 5

我会这样做：

var myText = $(".class1")[0].text;
$(".class2").each(function(element){
     if (myText == this.text)
         $(this).addClass("yourClass");
});

如果文本匹配子元素中的任何文本，请将类添加到此子级？

5 个答案: