如何用jQuery.has()检测div下同时存在两个同级指定类元素

jQuery 的 .has() 方法仅检查指定元素是否为当前集合元素的后代，与后代元素之间的层级、兄弟关系无关，你遇到的同级子元素筛选场景完全可以通过链式调用 .has() 实现，不需要用逻辑与运算符拼接方法。

完整实现代码 #

jQuery(document).ready(function($) {
  // 两步筛选得到同时包含两个指定子元素的目标容器
  const $targetQuestions = $('div.basic-question')
    .has('div.basic-answers-for-slider')
    .has('ul.basic-answers-results');

  // 隐藏目标容器和其前方紧邻的clearfix元素
  $targetQuestions.hide();
  $targetQuestions.prev('div.clearfix').hide();
});

代码说明 #

• 第一次 .has('div.basic-answers-for-slider') 会从所有 .basic-question 容器中筛选出包含滑块答案子元素的集合
• 第二次 .has('ul.basic-answers-results') 会在上一步的结果中，再次筛选出同时包含答案结果列表的元素，最终得到完全符合条件的目标容器
• .prev('div.clearfix') 只会匹配目标容器前紧邻的清除浮动元素，不会误操作其他位置的同类元素

可选扩展写法 #

如果需要后续添加更多筛选条件，也可以使用 filter 方法实现更直观的逻辑判断：

jQuery(document).ready(function($) {
  const $targetQuestions = $('div.basic-question').filter(function() {
    return $(this).find('div.basic-answers-for-slider').length > 0 
      && $(this).find('ul.basic-answers-results').length > 0;
  });
  $targetQuestions.hide();
  $targetQuestions.prev('div.clearfix').hide();
});

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