Question

我正在尝试调用一个函数来验证元素是否包含活动类我是否在我的span中添加图片但是问题所有span添加img标记即使我有条件也可以我有人可以解释对我来说为什么？我该如何解决？

我的分区

<div class="navbar-collapse collapse">
              <ul class="nav navbar-nav pull-right">
                  <li class="active"><a href="index.html"><span>Home</a></span><span></span></li>
                  <li><a href="reservation.html"><span>ChambresReservations</span></a><span></span></li>
                  <li><a href="contact.html"><span>Contact-US</span></a><span></span></li>
              </ul>
            </div>

我的JS

$(function(){
    var classExist=$(".navbar-collapse li").hasClass("active");
    if(classExist){
        $(this).find('span:nth-child(2)').append('<img src="images/site/bg-arrow-mr.png"/>')
    }
});

Answer 1

您的脚本存在一些问题

你可以获得具有类＆＃34; 活动＆＃34;的li元素通过

var elementHavingActiveClass = $(".navbar-collapse ul li.active");

然后按

将图像设置为span元素

$(elementHavingActiveClass ).find('span:nth-child(2)').append('<img src="images/site/bg-arrow-mr.png"/>')

Answer 2

在一行中，您可以像这样实现目标。

$(".navbar-collapse li.active").find('span:nth-child(2)').append('<img src="images/site/bg-arrow-mr.png"/>');

Answer 3

你不需要迭代li元素。您可以使用选择器li.active简单地定位具有类活动的li元素，然后在其中的第n个span中追加内容：

$(".navbar-collapse li.active").find('span:nth-child(2)').append('<img src="images/site/bg-arrow-mr.png"/>')

Answer 4

试试这个：您可以直接使用jQuery选择器查找具有活动类的li，请参阅下面的代码

$(function(){
    $(".navbar-collapse li.active").find('span:nth-child(2)').append('<img src="images/site/bg-arrow-mr.png"/>')
});

更改子元素CSS包含活动的类

4 个答案: