仅在课程“活动”时添加
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;
【讨论】:
以上是关于仅在课程“活动”时添加的主要内容,如果未能解决你的问题,请参考以下文章