JQuery - handle clicking

Question

Hello, I have such construction:

             <div id="slider"> 
               <div id="nav">
                    <div class="sliderPart">
                        <a href="#computers">
                            <strong>1</strong>
                        </a>
                    </div>
                    <div class="sliderPart">
                        <a href="#network">
                            <strong>2</strong>
                        </a>
                    </div>
                    <div class="sliderPart">
                        <a href="#web">
                            <strong>3</strong>
                        </a>
                    </div>
                    <div class="sliderPart">
                        <a href="#support">
                            <strong>4</strong>
                        </a>
                    </div>
               </div>
               <div id="slider-content">
                    <a href="#computers" id="slider-computers" class="slider-block">Test1</a>
                    <a href="#network" id="slider-network" class="slider-block">Test 2</a>
                    <a href="#web" id="slider-web" class="slider-block">Test 3</a>
                    <a href="#support" id="slider-support" class="slider-block">Test 4</a>
               </div>
            </div>

Now I have to handle clicking at 'nav' and 'slider-content' and get clicked element href-attribute.

       $('#slider').click(function(){
            console.log( $(this) );
       });

Using this code I get

[div#slider]

Answer 1

Use attr to get or set an element's attribute values:

$('#slider a').click(function(){
    console.log( $(this).attr('href') );
});

The selector #slider refers to the div element which is why firebug outputs [div#slider]. You can target anchors within it using the ancestor descendant selector:

Matches all descendant elements specified by "descendant" of elements specified by "ancestor".

Which means to put the descendant element after the ancestor, separated by a space as in the above example - $('#slider a')