仅在课程“活动”时添加

Posted

技术标签:

【中文标题】仅在课程“活动”时添加【英文标题】:Prepend only when class is 'active' 【发布时间】:2019-07-25 13:54:43 【问题描述】:

我想不通 我正在尝试收听,当列表项更改为“活动”类时,它将在列表项内的链接前添加一个 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>

【问题讨论】:

你没有选择你所在的那个......你正在重新选择 DOM 中的所有元素 你为什么不在将类更改为活动时这样做 - 如果你真的需要单独做(或“听”你说),你可能需要使用突变观察者或创建自己的触发器 ***.com/questions/1950038/… 【参考方案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;

【讨论】:

以上是关于仅在课程“活动”时添加的主要内容,如果未能解决你的问题,请参考以下文章

为什么仅在Nougat中为活动转换添加了WindowManager的视图?

处理仅在单击时更新 UI 数据的活动的后按?

仅在选项卡处于活动状态时加载数据?

批处理文件仅在 RDP 会话处于活动状态时执行

javascript 菜单 - 单击添加课程 - 活动

即使在表单活动验证状态下,如何仅在提交时验证角度表单