我如何使用 jQuery 到 select 除了过滤器元素之外的所有子项

Question

我有一个主div。我想 select 全部在主 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>

结果，当我点击星标时 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 到 select 除了过滤器元素之外的所有子项

How do I use jQuery to select all children except a filter element

jquery

jquery-selectors