添加与jQuery一类第一和最后一个子

-3

$('.image-container img:first').addClass('active'); 
 
$('.image-container img:last').addClass('left');

.active { border: 1px solid red; } 
 
.left { border: 1px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='image-container'> 
 
    <img src="/img.png" alt="xga-1"> 
 
    <br> 
 
    <img src="/img2.png" alt="xga-1"> 
 
</div>

当我添加类主动或动态离开，这也增加图像之间的类标记为<br>。我如何防止代码做到这一点，只将类添加到image-container中的图像？

来源

2017-08-16 John R

你确定吗？请创建一个证据。目前你的代码工作正常。 – gaetanoM

我把你的代码放在代码片段中。正如你可以看到它工作正常。没有任何关于你的代码可以应用br元素上的任何类。如果发生这种情况，它必定是由于你的代码的另一个区域 –

是的，我看到的所有东西都是你想要的。另外，为什么你使用br标签而不是简单地使用CSS来将它们显示为块元素？ – Snowmonkey

嘿，你可以使用“不”的功能在jQuery来做到这一点 http://api.jquery.com/not/

$('.image-container img:first').not("br").addClass('active'); 
$('.image-container img:last').not("br").addClass('left');

虽然这奇怪的是，这是发生在所有，但至少应该排除是否该位代码是原因。

来源

2017-08-16 16:33:37

但在提供答案之前，为什么您不验证用户描述的问题没有发生？ – quirimmo

我确实运行过这个代码段，显然它没有发生，但我在其环境中看到的是OP。添加此代码可以帮助排除这一点代码问题。更可能是其他地方。 –

$('.image-container img').first().addClass('active'); 
 
    $('.image-container img').last().addClass('left');

.active { border: 1px solid red; } 
 
    .left { border: 1px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class='image-container'> 
 
     <img src="/img.png" alt="xga-1"> 
 
     <br> 
 
     <img src="/img2.png" alt="xga-1"> 
 
    </div>

来源

2017-08-16 16:37:28

但在提供答案之前，为什么您不验证用户描述的问题没有发生？ – quirimmo

添加与jQuery一类第一和最后一个子

回答

相关问题