jquery - 仅在课程“活动”时添加
问题描述
我无法弄清楚我正在尝试听,当列表项更改为“活动”类时,它将在列表项内的链接前添加一个 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>
解决方案
不知道为什么要循环,只需使用选择器即可
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;
}
推荐阅读
- r - 绘制 3D 平面和矢量
- html - 无法更改标题中的链接颜色代码
- visual-foxpro - 在字符串中浏览年份
- javascript - 强制 JavaScript setTimout 函数在 x 毫秒后运行
- oauth-2.0 - 是否有任何 OAuth 授权支持代表用户授予访问权限,而无需用户交互?
- laravel - 如何将默认 elqount 分页查询字符串更改为其他页面=?
- laravel - PhpStorm 为相同的方法显示不同的颜色
- javascript - 如何通过单击或悬停在第一个 div 元素旁边水平显示另一个 div 元素?在第一个 div
- sql - 存储sql的体积
- postgresql - 使用带有 BIGINT 列的 Postgres 数据源在 Grafana 中绘制图表作为时间