如何检测指定类名的div是否存在相邻同级元素？（jQuery/原生JS）

我来帮你搞定这个问题！要检测类名为mydivclass的div是否有相邻（并排）的同级元素，不管是用原生JavaScript还是jQuery都有很直接的方案，下面给你一步步说明：

原生JS里可以通过previousElementSibling和nextElementSibling这两个属性来获取目标元素的前后相邻同级元素——注意这两个属性只会返回元素节点，会自动忽略文本、注释这类非元素节点，非常适合你的需求。

示例代码： #

// 获取目标div元素
const targetDiv = document.querySelector('.mydivclass');

// 检测前面是否有相邻同级元素
const hasPreviousSibling = targetDiv.previousElementSibling !== null;
// 检测后面是否有相邻同级元素
const hasNextSibling = targetDiv.nextElementSibling !== null;

// 输出结果
console.log('前面是否有相邻元素：', hasPreviousSibling);
console.log('后面是否有相邻元素：', hasNextSibling);

// 如果需要进一步判断相邻元素是否是div（或者有特定类名）
if (targetDiv.nextElementSibling) {
  const isNextDiv = targetDiv.nextElementSibling.tagName === 'DIV';
  console.log('后面的相邻元素是div吗：', isNextDiv);
  // 检查是否有特定类名
  const hasSpecificClass = targetDiv.nextElementSibling.classList.contains('your-class-name');
  console.log('后面的相邻元素有指定类名吗：', hasSpecificClass);
}

jQuery提供了.prev()和.next()方法，专门用来获取目标元素的前一个/后一个相邻同级元素，同样会自动过滤掉非元素节点，使用起来更简洁。

示例代码： #

// 获取目标div的jQuery对象
const $targetDiv = $('.mydivclass');

// 检测前面是否有相邻同级元素
const hasPreviousSibling = $targetDiv.prev().length > 0;
// 检测后面是否有相邻同级元素
const hasNextSibling = $targetDiv.next().length > 0;

// 输出结果
console.log('前面是否有相邻元素：', hasPreviousSibling);
console.log('后面是否有相邻元素：', hasNextSibling);

// 如果要检测相邻元素是否有特定类名，可以直接在方法里传类名
const hasNextWithClass = $targetDiv.next('.your-class-name').length > 0;
console.log('后面的相邻元素有指定类名吗：', hasNextWithClass);

针对你给出的DOM结构：

<div class="mydivclass">Some Text1</div> <div class="am I beside mydivclass ???">Some Text2</div>

用上面的方法检测的话，hasNextSibling会返回true，因为.mydivclass的后面确实有一个相邻的div元素。

内容的提问来源于stack exchange，提问作者Miso