Question

我有一个主要部门。我想在主div中选择所有内容，但开始div除外，它都是所有子元素（如自爆代码，粉红色块）。

.filter（）==>它显示了star div的所有子元素。

.not（）==>显示星形div，请期待输入和按钮元素。

$("*.main,.main *").filter("*.start,.start *").css({
  "backgroundColor": "pink"
});


$("*.main,.main *").filter("*.start,.start *").click((e) => {
  e.stopPropagation();
  alert("filter")
});

.main,
.main * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}

.start,
.start * {
  color: pink;
  border: 2px solid pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="width:500px;" class="main">(main)
  <div class="parent">div (parent)
    <div class="start">start
      <form id="more_form" method="get">
        <input type="text" name="id" id="id">
        <button id="more">Send my greetings</button>
      </form>
    </div>
    <div>div </div>
    <div>div </div>
    <div>div </div>
    <div>div </div>
  </div>

  <p>In this exampl".</p>
</div>

结果是，当我单击star div时，它也会显示警报。

我希望在单击非粉红色块时触发该功能，我该怎么办？非常感谢。

Answer 1

只需单击main并使用closest()来检查事件的目标是开始还是在开始之内

$("*.main,.main *").filter("*.start,.start *").css({
  "backgroundColor": "pink"
});

$('.main').click((e) => {
  if (!$(e.target).closest('.start').length) {
    alert("filter")
  }
});

.main,
.main * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}

.start,
.start * {
  color: pink;
  border: 2px solid pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="width:500px;" class="main">(main)
  <div class="parent">div (parent)
    <div class="start">start
      <form id="more_form" method="get" onsubmit="return false;">FORM
        <input type="text" name="id" id="id">
        <button id="more">Send my greetings</button>
      </form>
    </div>
    <div>div </div>
    <div>div </div>
    <div>div </div>
    <div>div </div>
  </div>

  <p>In this exampl".</p>
</div>

Answer 2

$("*.main,.main *").filter("*.start,.start *").css({"backgroundColor": "pink"});
   
    // Remove the wildcard after main because it will access all the class after it
     $("*.main,.main").click((e)=>{
         e.stopPropagation();
         alert("filter")
     });
     $(".start").click((e) => {
        e.stopPropagation();
     });

.main, .main * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
  }

.start,.start * {
            color: pink;
            border: 2px solid pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="width:500px;" class="main">(main)
        <div class="parent">div (parent)
            <div class="start">start
                <form  id="more_form" method="get">
                    <input type="text" name="id" id="id">
                    <button id="more">Send my greetings</button>
                </form>
            </div>
            <div>div </div>
            <div>div </div>
            <div>div </div>
            <div>div </div>
        </div>

        <p>In this exampl".</p>
    </div>

如何使用jQuery选择除过滤器元素以外的所有子代

2 个答案: