jQuery的选择div的最外面的div嵌套

Question

I am trying to use jQuery to select a div, but ignore all divs selected that are children of a selected div. No divs have any other way to identify them other than an HREF that I am matching. For example:

 outerdiv = $('a[href^="http://bizmate."]').closest('div'); outerdiv.prepend("This was selected") 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Won't be selected <div> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> </div> </div> <div> <div> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> 

This code selects all the divs , including the child. How can I limit it to only select the outermost div that satisfies the condition while ignoring the child divs that also satisfy the given condition?

Edit:

Currently, the example would give:

Won't be selected
This was selectedPowered by Bizmate
This was selectedPowered by Bizmate
This was selectedPowered by Bizmate
This was selectedPowered by Bizmate

I want the result to be:

Won't be selected
This was selectedPowered by Bizmate
Powered by Bizmate
Powered by Bizmate
This was selectedPowered by Bizmate

Answer 1

Use has() and last() .

1. a[href^="http://bizmate."] : Selects all the anchor elements whose href value starts with(^) " http://bizmate .".
2. :last : Selects last element from the matched set
3. closest('div') : Gets the closest matching ancestor

Demo:

 $('div > a[href^="http://bizmate.in"]').each(function() { $(this).parents('div:has(> a[href^="http://bizmate.in"])') .last().addClass('hello'); }); 

 .hello > a { border: solid 1px green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Won't be selected <div> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> </div> </div> <div> <div> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> 

Answer 2

This will select any top level parent, independent of the amount of clusters or their exact structure by filtering out the children based on the amount of links found down the tree :

 var link = 'a[href^="http://bizmate."]', outerdiv = $(link).filter(function() { var total = $(this).parents('div:last').find(link).length; if (total > 1) { var parent = $(this).closest('div').find(link).length; if (parent == total) return $(this); } else return $(this); }).closest('div'); outerdiv.prepend("This was selected"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Won't be selected <div> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> </div> </div> <div> <div> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> 

Answer 3

 $('a').click(function(event){
   event.preventDefault();
   var x = $(this).closest('div')
   $(x).prepend("This was selected");
 });

Answer 4

You can add a class to the parent div and do the following:

HTML:

<div>Won't be selected
  <div class="test">
    Powered by <a href="http://bizmate.in">Bizmate</a>
    <div>
      Powered by <a href="http://bizmate.in">Bizmate</a>
      <div>
        Powered by <a href="http://bizmate.in">Bizmate</a>
      </div>
    </div>
  </div>
</div>

<div>
  <div class="test">
    Powered by <a href="http://bizmate.in">Bizmate</a>
  </div>
</div>

JS:

outerdiv = $('a[href^="http://bizmate."]').closest('div.test');
$(outerdiv).prepend("This was selected")

Here is the fiddle: https://jsfiddle.net/hg989ffp/