Question

So i was trying to append some code to all my images(for a rollover) in a certain portion of my document via javascript (primarily for graceful degredation purposes)etc and so

after noticing my function not work…i wrote a super small function to test it and no good. In this example, what im trying to do is alert an images alt tag but not a specific button div. Essentially, apply said function to all images in a parent div (portSecW) and not the close buttons image/div.

so for the sake of this example, heres some HTML(pseudo):

<div id="portSecW">
  <img src="X" alt="something here"></img>
  <img src="a" alt="something here"></img>
  <img src="b" alt="something here"></img>
  <div class="closeXbtn"><img src="g" alt="something here"></img></div>
</div>

Here is what ive tried.

$('#portSecW img:not(".closeXbtn")').click(function(){
    alert($(this).attr("alt")); 
    return false;
});

Ive also gone about it like this

$('#portSecW img').not('.closeXbtn').click(function(){
    alert($(this).attr("alt")); 
    return false;
});

ive also tried like this but doesnt work (so im assuming that although i get no errors, its not constructed properly because the alert function doesnt fire.)

$('#portSecW img.not(".closeXbtn")').click(function(){
    alert($(this).attr("alt")); 
    return false;
});

So not sure what im doing wrong.

Thanks in advanced.

NOTE: Just incase anyone is looking, the marked “”accepted answer” worked for me but upon further digging. all of my tries above worked, the problem was i wasnt precise enough with how i traversed the DOM. So all of these do the same thing and work. here are the changes i made and again, these all worked.

$('#portSecW a').children('img').click(function(){
    alert($(this).attr("alt")); 
    return false;
});

$('#portSecW img').not(".closeXbtn img").click(function(){
    alert($(this).attr("alt")); 
    return false;
});

$('#portSecW img:not(".closeXbtn img")').click(function(){
    alert($(this).attr("alt")); 
    return false;
});

Thanks Everyone for your help

Answer 1

Use .children():

$('#portSecW').children('img').click(function(){
    alert($(this).attr("alt")); 
    return false;
});

The .children() method allows us to search through the children of these elements in the DOM tree and construct a new jQuery object from the matching elements.

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree.