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

Question

我有一个主 div。我想在主 div 中选择所有，除了开始 div 并且它都是子元素（作为自爆代码，粉红色块）。

.filter() ==> 它显示了星形 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>

结果，当我单击星形 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>