如何仅选择彼此靠近的元素？答案

【问题标题】：How to select only elements who stands close to each other?如何仅选择彼此靠近的元素？
【发布时间】：2016-05-22 08:18:45
【问题描述】：

我有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 实现它？

【问题讨论】：

img + img 将选择前面有另一个图像的任何图像。
img + img 不起作用jsfiddle.net/dhpqaoLx
你的文本节点应该被包裹在 span 中，这样可以更容易地定位相关的 imgs。否则，您可以过滤它，但您需要排除空白文本节点，这并不容易
参见例如：jsfiddle.net/pxnvzyj0
您的规范没有多大意义。您说您想选择“站在一起”的图像..“仅第二和第三图像”。为什么不是第4个？（第二个image3.jpg）

标签： javascript jquery jquery-selectors css-selectors

【解决方案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 选择器来优化你的代码。

【讨论】：