使用 jquery 选择器按标签排除元素答案

【问题标题】：exclude element by tag with jquery selector使用 jquery 选择器按标签排除元素
【发布时间】：2018-04-06 00:49:24
【问题描述】：

如何使用 jquery 选择器排除特定元素？在这个例子中，我可以按任何顺序添加尽可能多的水和种子，但是当我单击太阳按钮时，所有的水都应该消失，但种子应该保留。当我点击月亮按钮时，水应该会再次出现，而种子未受影响。我尝试过滤掉任何带有“span”标签的元素。我尝试了 .not('span') 功能，但没有成功。如何使用 jquery 选择器排除包含“span”标签的元素？ TIA

$("#water").click(function(){$("#garden").append('<div>water</div>');});
$("#seed").click(function(){$("#garden").append('<span><div>seed</div></span>');});
$("#sun").click(function(){$("#garden div").not('span').addClass('vapor');});
$("#moon").click(function(){$("#garden div").not('span').removeClass('vapor');});

div.vapor{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id='water'>water</button>
<button id='seed'>seed</button>
<button id='sun'>sun</button>
<button id='moon'>moon</button>
<div id='garden'></div>

这是第二个例子，说明为什么它必须是标记而不是使用类。请注意，我在此示例中使用了“选择”和“选项”，并且浏览器不完全支持使用 CSS 隐藏选项。我对这个例子的问题是，如果我点击“太阳”按钮 10 次，我必须点击“月亮”按钮 10 次才能显示水。我需要在“sun”按钮上使用标签排除，这样它就不会在“water”选项上多次包裹“span”。我想要实现的是，无论我点击多少次“太阳”按钮，我只需要点击一次月亮按钮，水就会再次出现。谢谢你

$("#water").click(function(){$("#garden").append('<option class="water">water</option>');});
$("#seed").click(function(){$("#garden").append('<option>seed</option>');});
$("#sun").click(function(){$("#garden option.water").wrap('<span>');});
$("#moon").click(function(){$("#garden span option.water").unwrap();});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id='water'>water</button>
<button id='seed'>seed</button>
<button id='sun'>sun</button>
<button id='moon'>moon</button>
<select id='garden'><option></option></select>

【问题讨论】：

如果你附加的水和种子有自己的类，解决你的问题会容易得多
@j08691，是的，我完全理解，但在某些情况下，使用类对于浏览器兼容性并不实用，需要使用标签。谢谢你的建议。
“使用类对于浏览器的兼容性是不切实际的，需要使用标签” 我认为在我多年的编码中我从未听说过或经历过这样的事情
@j08691 我举了第二个例子来说明为什么有时类对于浏览器兼容性并不实用，并且需要标记。在 select 中隐藏某些选项的最佳方法是用标签包装它，以实现浏览器兼容性。我仍然需要排除'span'标签以避免'sun'按钮在多次单击时多次执行。我可能是错的，但我希望你能理解。谢谢

标签： jquery jquery-selectors filtering

【解决方案1】：

似乎没有人有解决方案，经过几天的努力，我找到了自己的解决方案。关键是在选择器中使用“>”。我将“>”应用于我的两个示例并且都有效。同样，即使它有效，我也不会投票支持我自己的答案，以推广其他优雅的解决方案。不管怎么说，还是要谢谢你。

//example 1
$("#water1").click(function(){$("#garden1").append('<div>water</div>');});
$("#seed1").click(function(){$("#garden1").append('<span><div>seed</div></span>');});
$("#sun1").click(function(){$("#garden1>div").addClass('vapor');});
$("#moon1").click(function(){$("#garden1 div").removeClass('vapor');});

//example2
$("#water2").click(function(){$("#garden2").append('<option class="water2">water</option>');});
$("#seed2").click(function(){$("#garden2").append('<option>seed</option>');});
$("#sun2").click(function(){$("#garden2>option.water2").wrap('<span>');});
$("#moon2").click(function(){$("#garden2 span option.water2").unwrap();});

div.vapor{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4>example 1</h4>
<button id='water1'>water</button>
<button id='seed1'>seed</button>
<button id='sun1'>sun</button>
<button id='moon1'>moon</button>
<div id='garden1'></div>

<h4>example 2</h4>
<button id='water2'>water</button>
<button id='seed2'>seed</button>
<button id='sun2'>sun</button>
<button id='moon2'>moon</button>
<select id='garden2'><option></option></select>

【讨论】：