Question

我有以下HTML片段。

<div class="diagram-frame">
    <div class="diagram">
        <span class="diagram-name">Drawing Objects</span>
        <svg>...lots of child elements...</svg>
    </div>
    <div class="diagram-name">
        <a class="idlink" title="Drawing Objects (data models)" href="...">NA - Drawing Objects</a>
    </div>
</div>

目前，我使用这个jQuery选择器来检测点击的内容：

jClicked.add(jClicked.parents()).is('div.diagram-frame')

jClicked是包含被点击元素的jQuery对象。

但我需要排除diagram-name div的点击次数。如何使用.not('div.diagram-name')函数调用添加否定？

Answer 1

由于.is()与css选择器匹配，为什么不使用css :not()伪，并在一个命令中执行所有操作？

jClicked.add(jClicked.parents()).is('div.diagram-frame:not(.diagram-name)')

Answer 2

喜欢这个吗？

jClicked.add(jClicked.parents())
  .not(jClicked.$('div.diagram-name'))
  .is('div.diagram-frame')

Answer 3

注意，不确定jClicked对象？

尝试

$(function() {
    var jClicked = [];
    $(".diagram-frame").on("click", function(e) {
      if (!$(e.target).parent().is("div.diagram-name")) {
        jClicked.push(e.target);
          console.log($(jClicked));
          alert(jClicked.length);
      }
    });
});

$(function() {
    var jClicked = [];
    $(".diagram-frame").on("click", function(e) {
        e.preventDefault();
      if (!$(e.target).parent().is("div.diagram-name")) {
        jClicked.push(e.target);
          console.log($(jClicked));
          alert(jClicked.length);
      }
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="diagram-frame">
    <div class="diagram">
        <span class="diagram-name">Drawing Objects</span>
        <svg>...lots of child elements...</svg>
    </div>
    <div class="diagram-name">
        <a class="idlink" title="Drawing Objects (data models)" href="...">NA - Drawing Objects</a>
    </div>
</div>

jsfiddle http://jsfiddle.net/guest271314/2myjbuhL/

如何在这个JQuery选择器中包含否定？

3 个答案: