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

Posted 2023-05-09

【中文标题】如何使用 jQuery 选择除过滤器元素之外的所有子元素

【英文标题】：How do I use jQuery to select all children except a filter element

【发布时间】：2019-11-25 09:24:31

【问题描述】：

我有一个主 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 时，它也显示警报。

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

【参考方案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>

【参考方案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>