Question

我有一些容器有ids =＆＃34; container1＆＃34;，＆＃34; container2＆＃34;，＆＃34; container3＆＃34; ... 它们可以包含两种类型的标记之一：表格或画布。我想根据设备方向隐藏其中一个。我试过这个

$('[id^=container]:has(canvas)').hide();

或

$('[id^=container]:has(table)').hide();

但是两者都隐藏了所有容器，不要过滤其内部标签。

Answer 1

你可以做到

var x = $('[id^=container]').find("table").length;

// Will be 0 if no table inside it

if(x==0) { .. }
else { .. }

Answer 2

您可以在容器上使用类而不是ID。这是JSFiddle演示。

为了在现代浏览器中获得更好的性能，请使用$（＆＃34; your-pure-css-selector＆＃34;）。has（selector / DOMElement）。

来源：https://api.jquery.com/has-selector/

基本上我做了3个容器。一个有桌子，一个有画布，一个没有。

<div class="container green">
    <table></table>
</div>
<div class="container blue">
    <canvas></canvas>
</div>
<div class="container red"></div>

快速的CSS让div可见。

div.container{
    display: inline-block;
    height: 50px;
    margin: 10px;
    width: 50px;
}

div.green{
    background-color: green;
}

div.blue{ 
    background-color: blue;
}

div.red{
    background-color: red;
}

并完成它，一个在文档准备就绪时执行的jQuery。

$(document).ready(function(){
   $('div.container').has('canvas').hide(); 
});

Answer 3

如果您知道要抓取容器的元素没有嵌套在其他标记中，则可以使用HTML元素的parentNode属性来爬上DOM树并隐藏父级。

document.querySelector("[id^=container] > table").parentNode.style.display= "none";

演示概念的示例：

document.getElementById("input").addEventListener("change", function() {
  document.getElementById("container1").style.display = "block";
  document.getElementById("container2").style.display = "block";
  document.querySelector("[id^=container] > " + this.value).parentNode.style.display = "none";
});

#container1 {
  border: 1px solid red;
}
#container2 {
  border: 1px solid blue;
}

<select id="input">
  <options>
    <option value="table">Hide the table</option>
    <option value="canvas">Hide the canvas</option>
  </options>
</select>
<div id="container1">Table
  <table></table>
</div>
<div id="container2">Canvas
  <canvas></canvas>
</div>

Answer 4

我没有意识到我有一个id =“container *”的全局容器。多么愚蠢的错误。很抱歉偷你的时间，谢谢大家！

jQuery：有选择器过滤器麻烦

4 个答案: