如何使用jQuery选择父元素可见且自身被选中的div？

嘿，你原来的选择器写法不符合jQuery的语法规范，所以才无法生效。咱们来拆解问题，给出正确的实现方式：

首先要明确两个核心条件：

1. 目标div自身处于选中状态（:checked）—— 这里要注意，默认情况下:checked伪类只适用于表单元素（如checkbox、radio），如果你的div是通过自定义类（比如.checked）实现选中状态，记得把下面的:checked换成.checked。
2. 它的父元素拥有.visible类（或者你是指父元素处于可见状态？两种情况我都给你列出来）

场景1：判断当前元素$(this)是否符合条件 #

如果你是在事件回调里，想判断当前触发事件的div是否满足要求，可以这样写：

父元素拥有.visible类的情况 #

if ($(this).is(':checked') && $(this).parent().hasClass('visible')) {
  // 这里写符合条件后的逻辑
}

父元素处于可见状态（:visible伪类）的情况 #

if ($(this).is(':checked') && $(this).parent().is(':visible')) {
  // 这里写符合条件后的逻辑
}

场景2：选择页面上所有符合条件的div元素 #

如果你要一次性选中所有满足条件的div，可以用这两种写法：

写法一：结合filter方法 #

// 父元素有.visible类
const validDivs = $('div:checked').filter(function() {
  return $(this).parent().hasClass('visible');
});

// 父元素可见的情况
const validDivs = $('div:checked').filter(function() {
  return $(this).parent().is(':visible');
});

写法二：链式选择器（更简洁） #

// 父元素有.visible类的情况，直接选中.visible下的:checked子div
const validDivs = $('.visible > div:checked');

为什么你的原写法不行？因为[is=":checked"]和[parent=".visible"]不是jQuery支持的选择器语法——is()和parent()都是jQuery方法，不能用属性选择器的格式来调用。

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