Question

I’m having issues with a jQuery query.

Consider the following (crazy) HTML example:

<!-- this is the outermost condition -->
<div id="condition">

     <!-- this is a tag that I am looking for -->
     <input type="text" />

     <div id="condition">
          <input type="radio" />
     </div>

     <div>

          <div id="condition">
               <input type="checkbox" />
          </div>

          <!-- this is a tag that I am looking for -->
          <input type="text" />

     </div>
</div>

Given the above example-markup and the outer-most condition (seen in the top), how can I get all input elements WITHIN that condition, that are not members of inner conditions as well?

I’ve provided examples so you can see which tags I want the query to return.

Answer 1

All html elements on a page should have a unique ID.

That said, you could do something like this:

// select the :first #condition
var $first = $("#condition:first");

// use map() to filter out inputs that don't meet our criteria
// and dump them into the inputs Array.
var inputs = $first.find("input").map(function() {

    // select parent with #condition ID
    var $parent = $(this).parent("#condition");

    // if parent == null or parent doesn't have any parents with ID = #condition
    // return the input, otherwise null, which removes it from the list
    return $parent.length == 0 || $parent.parents("#condition").length == 0 
        ? $(this) : null;
});

You end up with is an Array of inputs that are not wrapped in #condition or its parent is the first #condition element

---

working example: http://jsfiddle.net/hunter/EsYLx/