如何根据子元素中的数据选择元素？

Question

如果我有这两个div：

<div class="foo"><div class="bar" data-stuff="1"></div></div>
<div class="foo"><div class="bar" data-stuff="2"></div></div>

如果给定参数2，如何选择类foo的div？我可以这样做：

$('.foo').find('[data-stuff=2]');

但我只会得到子元素。

Answer 1

选择元素，然后获取其父元素。

$('[data-stuff="2"]').parent()

Answer 2

或者，使用其中一些方法得到相同的结果:(第三个使用.parents（）选择器以防多个父元素）：

当然＆＃39; div [class ^ =＆＃34; foo＆＃34;]＆＃39;等于＆＃39; .foo＆＃39;在那种情况下:)：）

＆＃13;

＆＃13;

var elems1 = $('[data-stuff="2"]').parent();
var elems2 = $('[data-stuff="2"]').closest('div[class^="foo"]');
var elems3 = $('[data-stuff="2"]').parents('div[class^="foo"]');

alert($(elems1).html());
alert($(elems2).html());
alert($(elems3).html());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar" data-stuff="1">1</div>parent1</div>
<div class="foo">
  <div class="bar" data-stuff="2">2</div>parent2</div>

＆＃13;

＆＃13;

＆＃13;

游乐场：http://jsfiddle.net/upeqt2qw/

Answer 3

只需调用父方法：

$('div.foo [data-stuff=2]').parent();