Question

I have several outer divs, all of them contain 3 inner divs class1 class2 class3. I want to select the outer div based on the value attribute of its inner div that has class1. For example, I want to select the first div because its class1 div has value x. How do I do this with 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

My first thought was:

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

But I wasn’t sure of the syntax (edit: it works). This, however, could work as well:

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

Note however, these will only return the first parent (in the case of multiple child divs having a matching “value” attribute). If you want to do something with multiple parent matches, you could iterate through the result with $.each and look at them individually:

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