Question

我有HTML代码：

<html>
  <head></head>
  <body>
     <div class="images">
        Some text
        <img src="image1.jpg">
        Some text
        <img src="image2.jpg">
        <img src="image3.jpg">
        <img src="image3.jpg">
        Some text
        <img src="image4.jpg">
        Some text
    </div>
  </body>
</html>

我只需要选择站在一起的图像并为它们添加一个类。在上面的示例中，我只需要将类添加到第二个和第三个图像。我如何使用Jquery或Vanila JS实现它？

Answer 1

首先，您需要将Some text放入标记中。它可以是您想要的任何标签。我选择span标签。

<span>Some text</span>
<img src="image1.jpg">
<span>Some text</span>
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image3.jpg">
<span>Some text</span>
<img src="image4.jpg">
<span>Some text</span>

之后，您应该在jquery中使用.prev()来选择所选IMG中的先前标记。因为当您使用img+img选择图像时，它只会在第一个图像之后选择两个图像。所以第一个想要的图像不能在你的选择中。我已经在JSfiddle中为你准备了这个解释，以便更清楚。

$("img + img").addClass('red');
$("img + img").prev().addClass('red');

https://jsfiddle.net/linkers/dhpqaoLx/3/

显然，您可以使用变量而不是两次使用jquery选择器来优化代码。

如何只选择彼此靠近的元素？

1 个答案: