jquery selector help... thought I followed the example correctly...but can't get it to work..

Question

I'm trying to do the following in jquery but can't make it work .

I want to select all the DIV tags that have a custom attribute called NODE_ID that have a value of 49_3. then select the and change the src attribute to a different image.

Here's the HTML:

<div style="display: block;" id="71_7_sub_p_div" node_id="49_3">
    <span>
        <img src="../images/maximize.png"> &nbsp;Greenfield Industrial Park
    </span>
</div>   

Here's the script:

<script type="text/javascript">
    $(document).ready(function(){
        $("div[node_id='49_3']:has(img)").attr("src","../images/folder_closed.png");
    });
</script>

Any ideas are appreciated. thanks.

Answer 1

$("div[node_id='49_3'] img").attr("src","../images/folder_closed.png");

That should work but I would suggest that you use CSS for these images rather than use javascript to switch the src.

<div style="display: block;" id="71_7_sub_p_div" node_id="49_3" class="maximize">
    <span>&nbsp;Greenfield Industrial Park</span>
</div> 

CSS

.maximize{
    background: url(/images/maximize.png) no-repeat;
    padding-left: 10px; // width of icon
}
.minimize{
    background: url(/images/folder_closed.png) no-repeat;
    padding-left: 10px; // width of icon
}

Javascript:

<script type="text/javascript">
    $(document).ready(function(){
        $("div[node_id='49_3']").removeClass('maximize').addClass('minimize');
    });
</script>

The benefit of doing it like this is that you can easily manage the different states styles in the CSS and don't have to dig through the javascript when you need to change the url to the image. Also it gives you an easy way to figure out the state of the "folder".