Question

假设以下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，其中child元素是一个隐藏的输入，其类为'id'且值为2？

我当前的尝试选择子元素，而不是父元素。我现在可以打电话给父母，因为我有孩子，但我正在寻找一个让我第一次接触父母的选择器。

获取孩子的选择器......

var element = $(".panel > input[type='hidden'][value='2'].id");

我也尝试了:has，但是它选择了两个面板，因为它选择了所有后代，而不仅仅是子节点和div'colection'在第一个面板上有一个隐藏的输入，其中类'id'和值为2。 / p>

这是我完整的测试示例......

完成测试示例：

$(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>

Answer 1

您可以使用.has()方法，使用> direct child combinator执行您所描述的内容，如下所示：

var elements = $(".panel").has("> input[type='hidden'][value='2'].id");

工作片段：

＆＃13;

// 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'});
});

＆＃13;

<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>

＆＃13;

Answer 2

您可以这样做：

$(".panel:has(> input.id[type=hidden][value=2])");

HERE是:has(...)选择器的文档。

＆＃13;

var $e = $(".panel:has(> input.id[type=hidden][value=2])");
console.log("Number of elements matching the selector:",$e.length);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>

＆＃13;

Answer 3

首先选择输入，然后只需获取父面板：

$( 'input.id[type="hidden"][value="2"]' ).parent( '.panel' );

第一个选择器将选择两个匹配的输入，使用.parent()选择器调用.panel会将集合减少为直接父级为.panel的元素

如果你想在一个选择器中，我想你可以这样做：

$( '.panel:has(> input.id[type="hidden"][value="2"])' )

请记住，这是一个性能较差的选择器。

如何使用jQuery选择具有特定子元素的元素？

3 个答案: