Question

也许这对我的项目来说是特定的，但是我想知道是否有更好的方法来完成它。

对于一个工作项目，我有一个网站使用了第三部分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>

我需要将事件添加到c2和c3上，而不是添加到c1 div上，因此我创建了一个选择器：$('.a .b .c .c2, .a .b .c .c3')

它工作正常，但在我的情况下，类名更长（因此我的选择器有100个字符...），而.c2和。c3类则用于项目，因此我需要保留.a .b. .c部分。

这样可以做选择器吗 $('.a .b .c (.c2 || .c3)')吗？

或者您有任何想法吗？像在.c上停止选择器并检测目标类？这真的是更好的解决方案吗？

Answer 1

您可以使用变量来存储公共部分：

div

您还可以使用render()，它看起来可能最接近您的要求：

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

如果还有更多内容，您可以使用.find()，例如：

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

Answer 2

与其使用字符串连接生成选择器，不如使用jQuery的.find()方法：

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

如果您希望提供父母的背景信息，也可以这样做：

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

如果您想将click事件绑定到元素而不依赖事件冒泡，这种方法将起作用：

// 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').on('click', '.c2, .c3', function() {
  // GUARD: Do not proceed if element is not a child of `.a .b .c`
  var $t = $(this);
  if (!$('.a .b .c').find($t).length) {
    return;
  }
  
  // Handle click event
  console.log('clicked');
});

.c1, .c2, .c3 {
  cursor: pointer;
  color: green;
}

.a .b .c .c1,
.foobar .foobaz .foobarbaz .c1, 
.foobar .foobaz .foobarbaz .c2,
.foobar .foobaz .foobarbaz .c3 {
  cursor: not-allowed;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Elements are child of <code>.a .b .c</code>.</p>

<div class="a">
   <div class="b">
     <div class="c">
        <div class="c1">
           C1 (will not fire event)
        </div>
        <div class="c2">
           C2 (will fire event)
        </div>
        <div class="c3">
           C3 (will fire event)
        </div>
     </div>
   </div>
</div>

<hr />

<p>Elements are not child of <code>.a .b .c</code>.</p>

<div class="foobar">
   <div class="foobaz">
     <div class="foobarbaz">
        <div class="c1">
           C1 (will not fire event)
        </div>
        <div class="c2">
           C2 (will not fire event as parents do not match)
        </div>
        <div class="c3">
           C3 (will not fire event as parents do not match)
        </div>
     </div>
   </div>
</div>

Answer 3

您可以简单地使用

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

父级中的选择器多个类

3 个答案: