JQuery - handle clicking

Question

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')

---

FYI AS OF VER 1.6 .prop() introduced. _{More Info}

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes. _{More Info}

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties. _{More Info}