CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zabs
Zabs

Reputation: 14142

How to find all links within a div (and all its children elements)

I have some logic below that effects all of the 'a' href links on a page - I want to modify this somehow to ONLY effect a href links that are within a div and anymore within child divs...

In this instance I only want to affect the 'Google' link

    $( 'a' ).each(function(index) {
        $(this).on('click', function(event){

        });
    });

// html

<div id='menu'>
   <a href="">BBC</a>
   <a href="">NBC</a>
</div>
<div class="container">
   <div>
     <a href="">Google</a>
   </div>
   <span>Yahoo</span>        
</div>

Upvotes: 1

Views: 1199

Answers (2)

Diego Incerti
Diego Incerti

Reputation: 136

If I understood correctly, you only want to find the "google" link, right? Try this

$('div > div > a' ).on('click', function(event) {
  alert($(this).html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='menu'>
   <a href="">BBC</a>
   <a href="">NBC</a>
</div>
<div class="container">
   <div>
     <a href="">Google</a>
   </div>
   <span>Yahoo</span>        
</div>

Upvotes: 2

Satpal
Satpal

Reputation: 133403

You can use bind event handler using class selector.

$('.container > div').on('click', 'a', function() {
});

Upvotes: 2

Related Questions