仅当 DOM 中具有特定 ID 的前一个元素存在时，按类选择 div答案

【问题标题】：select div by class only if previous element in DOM with particular ID exists仅当 DOM 中具有特定 ID 的前一个元素存在时，按类选择 div
【发布时间】：2017-07-21 00:50:32
【问题描述】：

我正在尝试选择一个 div 并更改其背景图像，但前提是它之前的 a 元素存在并且具有特定 ID。请参阅以下内容：

<td class ="thumbnails">
<a name="abc" id ="def"></a>
<div class="bgimages"></div>
</td>

我将如何选择和更改具有类“bgimages”的 div 的背景图像，基于它之前是否具有 ID 为“def”的 a 元素？

【问题讨论】：

您能详细说明一下吗？
CSS next element的可能重复

标签： jquery

【解决方案1】：

没有理由为此使用 jQuery 或 javascript，您可以只使用 CSS。请参阅下面的颜色示例。

.bgimages {
    background-color: green;
}

#def + .bgimages {
    background-color: orange;
}

<table>
  <tr>
    <td class ="thumbnails">
      <a name="abc" id ="def">yyyy</a>
      <div class="bgimages">yyyy</div>
    </td>
  </tr>
  <tr>
    <td class ="thumbnails">
      <a name="abc" id ="defxxx">yyyy</a>
      <div class="bgimages">yyyy</div>
    </td>
  </tr>
</table>

将background-color 替换为background-image

【讨论】：

不错，人家跳jquery路由太快了

【解决方案2】：

您可以选择 div 元素之前带有def id 锚点；

console.log($("a#def").next("div.bgimages"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class ="thumbnails">
<a name="abc" id ="def"></a>
<div class="bgimages"></div>
</td>

【讨论】：