Jquery 选择器父级中的多个类

也许这对我的项目来说有点特殊，但我想知道是否有更好的方法

对于一个工作项目，我有一个网站使用了第三部分iframe，我无法编辑html。我需要在此iframe（示例）的某些部分添加一个单击事件。 来自iframe的html如下所示：

<div class="a">
   <div class="b">
     <div class="c">
        <div class="c1">
           C1
        </div>
        <div class="c2">
           C2
        </div>
        <div class="c3">
           C3
        </div>
     </div
   </div
</div>

C1
C2
C3
您可以使用变量来存储公共零件：

var selector = ".a .b .c ";
$(selector + ".c2, " + selector + ".c3").hide();


您还可以使用
.find（）
，它看起来可能最符合您的要求：

$(".a .b .c").find(".c1, c2").hide();


如果还有更多，您可以使用
.add（）
，类似于：

var selector = ".a .b .c ";
var parts = [ ".c2", ".c3" ];

var jq = null;
$.each(parts, function(i, val) {
  if (jq == null)
      jq = $(selector + val);
  else
      jq.add(selector + val);
});
jq.hide();

使用jQuery的
.find（）
方法，而不是使用生成选择器的字符串连接：

$('.a .b .c').find('.c2, .c3')

如果您喜欢提供父级上下文，也可以这样做：

var $parent = $('.a .b .c');
$('.c2, .c3', $parent);

如果希望将单击事件绑定到元素而不依赖于事件冒泡，则此方法将起作用：

// Solution 1
$('.a .b .c').find('.c2, .c3').click(function() {
    // Handle click event
});

// Solution 2
var $parent = $('.a .b .c');
$('.c2, .c3', $parent).click(function() {
    // Handle click event
});

如果确实需要依赖事件冒泡，则必须对照事件目标的父级进行检查：


$（'body'）。在（'click'、'.c2、.c3'，函数（）上{
//GUARD：如果元素不是“.a.b.c”的子元素，则不要继续`
var$t=$（本）；
如果（！$（'.a.b.c'）。查找（$t）.length）{
返回；
}
//处理单击事件
console.log（'clicked'）；
});
.c1、.c2、.c3{
光标：指针；
颜色：绿色；
}
.a.b.c.c1，
.foobar.foobaz.foobabaz.c1，
.foobar.foobaz.foobabaz.c2，
.foobar.foobaz.foobabaz.c3{
光标：不允许；
颜色：红色；
}

元素是
.a.b.c
的子元素

C1（不会触发事件）
指挥与控制（将发生火灾事件）
C3（将发生火灾事件）

元素不是
.a.b.c
的子元素

C1（不会触发事件）
C2（不会触发事件，因为家长不匹配）
C3（由于家长不匹配，不会触发事件）
您只需使用

$(".c2,.c3").click(function(e){
//handle click event
});

$（.a>.b>.c>.c2、.a>.b>.c>.c3）
应该work@CaptainPlanet我的问题是选择器太长，希望对其进行优化$（'.a.b.c.c2、.a.b.c.c3'）可以工作，但在我的例子中，我有一个c4的类名要长得多。@CaptainPlanet根本不能解决OP的问题。有没有一个规则可以让你选择哪一个-你说“不是c1 div”，但这是因为它是第一个，即“不是第一个div”。在这种情况下，您会想：
$（“.a.b.c>：not（：first child）”）
工作吗？这些
c
是动态创建的吗？这是一种解决方案，代码更具可读性。问问自己，这是否真的比拥有一个大选择器好。代码可读性还是性能？在接受这一点之前，将看看是否有人有更好的想法：）不幸的是，
.find
方法不能在我的案例中使用，因为它是一个点击事件（
on（'click'，'here my big selector'）
），但它仍然是一些人的解决方案case@DessaugesAntoine如果你不打算依赖事件冒泡，您只需将选择器返回的集合链接到
。单击（…）
@Terry不了解如何操作，但我会查看它。谢谢：）你应该在问题中提到
。on（“单击”，“选择器”
，如果相关的话。我不确定这在我的情况下是否可行，因为我的事件是这样的：
$（'body'）。on（'click'，'mySelector'，function（）{…}）；
。我需要这个，因为div来自iframe，并且您提出的解决方案不符合要求。但这是最好的解决方案far@DessaugesAntoine好的。如果是这样的话，请参阅我的更新答案和代码片段。是的，这是可行的，但在我的情况下，我认为保留我的大选择器比使用特定的If要好。不要附加但是谢谢你的帮助：）@DessaugesAntoine你能定义“更好”吗？在某种程度上，你总是听到点击事件在身体上冒泡，因此在
.on（）
方法中进行性能过滤和在
if
语句中进行过滤几乎没有什么区别。我最初的帖子是为了了解如何做。因为它是一个工作项目，所以当性能没有受到真正影响时，我更喜欢代码可读性，因为其他人会在我之后处理它。对我来说，拥有一个带有注释的大选择器（个人观点）比拥有一个需要其他人完全理解才能更新代码的if语句要好。（有点难以解释，因为我很抱歉）。
.c2和.c3类用于项目的其他部分，所以我需要保留.A.b。c部分。
。阅读完整的帖子：使用一些html。您发布的html只是一小部分。它没有提到要查找的html的任何其他部分。您可以有一个相同的主父级，并在此基础上找到子级$（“.a.c2”，“.aa c2”）。单击（function（）{}）；其中，类元素在任何级别都有子c2，而aa类元素在任何级别都有子c2。在a和c2之间，如果有任何元素带有类，它们可以被跳过。我的帖子说我有一个工作选择器，我想知道是否有办法优化它，因为它是一个大选择器。还有人说我需要保留“.a.b.c”部分。我不发布真正的html的唯一真正原因是，100行html比一个示例更难理解，而且因为这是一个工作项目，如果可能的话，我避免在互联网上发布客户信息