假设以下 html 片段...
HTML 示例
<div class="panel">
<input type="hidden" class="id" value="1"></input>
<div class="collection">
<div>
<input type="hidden" class="id" value="1"></input>
<input type="text" value="hello world"></input>
</div>
<div>
<input type="hidden" class="id" value="2"></input>
<input type="text" value="goodbye moon"></input>
</div>
</div>
</div>
<div class="panel">
<input type="hidden" class="id" value="2"></input>
<div class="collection">
<div>
<input type="hidden" class="id" value="3"></input>
<input type="text" value="some text"></input>
</div>
<div>
<input type="hidden" class="id" value="4"></input>
<input type="text" value="whatever"></input>
</div>
</div>
</div>
我如何制作一个 jQuery 选择器来选择类为“panel”的 div，其中子元素是类为“id”且值为 2 的隐藏输入？
我当前的尝试选择了子元素，而不是父元素。既然我有了 child ，我就可以调用 parent ，但我正在寻找一个选择器，让我第一次得到 parent 。
获取子项的选择器...
var element = $(".panel > input[type='hidden'][value='2'].id");
我也试过 :has 但它选择了两个面板，因为它选择了所有后代，而不仅仅是子和 div 'colection' 有一个隐藏的输入，类为 'id' 和值 2第一个面板。
这是我完整的测试示例...
完整的测试示例:
$(document).ready(function () {
var element = $(".panel > input[type='hidden'][value='2'].id");
var elements = $(".panel").has("input[type='hidden'][value='2'].id");
});<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
<div class="panel">
<input type="hidden" class="id" value="1"></input>
<div class="collection">
<div>
<input type="hidden" class="id" value="1"></input>
<input type="text" value="hello world"></input>
</div>
<div>
<input type="hidden" class="id" value="2"></input>
<input type="text" value="goodbye moon"></input>
</div>
</div>
</div>
<div class="panel">
<input type="hidden" class="id" value="2"></input>
<div class="collection">
<div>
<input type="hidden" class="id" value="3"></input>
<input type="text" value="some text"></input>
</div>
<div>
<input type="hidden" class="id" value="4"></input>
<input type="text" value="whatever"></input>
</div>
</div>
</div>
</body>
</html>最佳答案
您可以使用 .has() 来执行您所描述的操作方法，使用 > direct child combinator ，像这样:
var elements = $(".panel").has("> input[type='hidden'][value='2'].id");
工作片段:
// no-conflict safe shorthand document ready
jQuery(function($) {
// utilize .has with the > child combinator
var elements = $(".panel").has("> input[type='hidden'][value='2'].id");
elements.css({border: '2px solid red'});
});<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="panel">
<input type="hidden" class="id" value="1"></input>
<div class="collection">
<div>
<input type="hidden" class="id" value="1"></input>
<input type="text" value="hello world"></input>
</div>
<div>
<input type="hidden" class="id" value="2"></input>
<input type="text" value="goodbye moon"></input>
</div>
</div>
</div>
<div class="panel">
<input type="hidden" class="id" value="2"></input>
<div class="collection">
<div>
<input type="hidden" class="id" value="3"></input>
<input type="text" value="some text"></input>
</div>
<div>
<input type="hidden" class="id" value="4"></input>
<input type="text" value="whatever"></input>
</div>
</div>
</div>关于javascript - 如何使用 jQuery 选择具有特定子元素的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48329141/