How do I select an image within two <div> tags?

Question

Code is as follows:

<div id="compare_view" align="center">

    <div id="compv-navbar">
        <img src="image1.png"> | <img src="image2.png"> | <img src="image3.png"> | Text can be here
    </div>    
</div>

I would like to be able to manipulate all of the images within the 'compv-navbar' div.

I know I could give each image a unique ID and select them that way, but I want to manipulate all the images within that compv-navbar div at the same time.

Edit: Sorry, I would like to select it with CSS. I thought it was obvious from the tags.

Answer 1

#compv-navbar img { 'your schnizzzle' }

Answer 2

Take a look at the JQuery "each" method: http://api.jquery.com/jQuery.each/

Answer 3

#compare_view #compv-navbar img { } 

The first id isn't really necessary but makes it more specific and linear-like. You can go ahead and just use #compv-navbar img if you want.

If you want to manipulate with javascript, getElementById on #compv-navbar and getElementsByTagName('img') using that as a context.

jQuery-wise it would be $('#compv-navbar img')

Answer 4

/*
query for id compv-navbar and populate NodeList collection with all <img> children
NOTE: since ids _required_ to be unique within the document, asking for compare_view first is redundant
*/
var nodeList = document.getElementById( 'compv-navbar' ).getElementsByTagName( 'IMG' );
for ( var i = 0; i < nodeList.length; i++ )
  nodeList[ i ].title = 'Here is my image!'

huh, no longer has JS flavour?

#compare_view>#compv-navbar>img { content: "here WAS my image" }

Again, selector is over-specific