Question

我有几个外部div，它们都包含3个内部div class1 class2 class3。我想根据其内部div的值属性class1来选择外部div。例如，我想选择第一个div，因为其class1 div的值为x。我如何用jquery做到这一点？

<div> <-----this is the div I want to select
  <div class="class1" value="x"></div>
  <div class="class2" value="y"></div>
  <div class="class3" value="z"></div>
</div>

<div> 
  <div class="class1" value="a"></div>
  <div class="class2" value="b"></div>
  <div class="class3" value="c"></div>
</div>

Answer 1

我的第一个想法是：

$('.class1[value="x"]').parent();

但我不确定语法（编辑：它的工作原理）。但是，这也可以起作用：

$('.class1').filter(function() {
    return $(this).attr("value") == "x";
}).parent();

但请注意，这些只会返回第一个父级（如果多个子div具有匹配的“value”属性）。如果您想对多个父匹配执行某些操作，可以使用$.each遍历结果并单独查看它们：

$('.class1[value="x"]').each(function() {
    var parent = $(this).parent();
});

Answer 2

另一种方法是使用:has选择器

var elem = $('div:has(.class1[value="x"])');

Answer 3

$('div').has('div[value=x]');

demo

$('div:has([value=x])').closest('div');

demo 2

$('div[value=x]').parents('div');

demo 3

$('div>div[value=x]').parent('div');

demo 4

$.fn.getChildVal = function(val){  
  $('[value='+val+']').parent().css({background:'red'});
};

$('div').getChildVal('x');

plugin :)

来自文档：

http://api.jquery.com/closest
http://api.jquery.com/has

Answer 4

你可以这样做。

           $(document).ready(function () {
            $("div.class1 [value='x']").parent('div');
        });

选择包含具有特定值的div的div

4 个答案: