6

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

4 Answers 4

3

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>

1
  • 1
    Cheers, you're very welcome. It wrecked my brain a bit at first how to put this together but it was quite educational for myself to do so. Interesting question you posted.
    – Shikkediel
    Nov 16, 2015 at 19:47
3

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>

5
  • When I run the code, it seems to select only the very first div. I need it to select the div from the first nest, and the div from the second nest below, the result would look like: Won't be selected This was selectedPowered by Bizmate Powered by Bizmate Powered by Bizmate This was selectedPowered by Bizmate Nov 16, 2015 at 4:35
  • This works! I will now have to study why it works, haha. Thanks a lot! Nov 16, 2015 at 5:12
  • For the given structure, it's quite efficient so +1 from me. I was likely overthinking it myself although reading the question, it's not an exact answer but will rather always select the first and last link on the entire page instead of getting the outer most link of any cluster present.
    – Shikkediel
    Nov 16, 2015 at 7:42
  • Hmm... looking at it again, it's really not an answer to the question at all. Just a workaround for the current markup. Gave it too much credit so better not edit. ;-)
    – Shikkediel
    Nov 16, 2015 at 11:34
  • Ah, you're right. The answer only worked for the example I gave, but it won't work for a case where I have more than 2 groups of nests. Nov 16, 2015 at 15:46
0
 $('a').click(function(event){
   event.preventDefault();
   var x = $(this).closest('div')
   $(x).prepend("This was selected");
 });
0

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/

1
  • I cannot edit the HTML I am trying to work on, so adding a class or ID won't work in this case. Unless there is some way to add the class with jQuery, I can't use this. Of course, if you can add the class with JavaScript to the outermost 'div' of the nest, that would answer my question. Nov 16, 2015 at 15:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.