Question

我不知道这个我正在尝试监听，当列表项更改为“活动”类时，它将在该列表项内的链接之前添加一个span元素。

我的html是

<ul>

  <li class="active">
    <a href="#when">When should I water my terrarium?</a>
  </li>

  <li><a href="#where">Where did the bugs come from?</a></li>

</ul>

我的jQuery是

jQuery('.cat-sidebar .widget_text li').each(function() {

if(jQuery(this).hasClass('active')) {
    jQuery('.cat-sidebar .widget_text li a').prepend('<span><i class="fas fa-angle-double-right"></i></span>');
} 

});

我将如何正确执行此操作，以便在li类处于活动状态时的最终结果如下所示：

<ul>

  <li class="active">
    <a href="#when">

      <span><i class="fas fa-angle-double-right"></i></span> 
      When should I water my terrarium?

    </a>
  </li>

  <li><a href="#where">Where did the bugs come from?</a></li>

</ul>

Answer 1

不确定为什么要循环播放，只需使用选择器即可

jQuery('.cat-sidebar .widget_text li.active a').prepend(...)

但是代码的问题在于，您正在选择所有元素，而不能使用您正在使用的元素。

jQuery('.cat-sidebar .widget_text li')
  .each(function(){
    if(jQuery(this).hasClass('active')) {
      jQuery(this)
        .find('a')
          .prepend('<span><i class="fas fa-angle-double-right"></i></span>');
    } 
  });

现在，没有简单的方法来监听添加的活动类。您可以使用变异观察器，但是那行不通。另一个选择是不用担心，只需将HTML添加到所有元素中，然后使用CSS规则显示隐藏即可。

li span.myIcon {
  display: none;
}

li.active span.myIcon {
  display: inline;
}

仅在班级“活动”时前置

1 个答案: