Question

I am trying to a change a class for a span located inside an h3 but I am unable to. Here is a link to what I am trying to accomplish: http://jsfiddle.net/WPxG4/9/

Code:

jQuery(document).ready(function() {
    $('h3').click(function() {
        $(this).next('ul').toggle();
        $(this).next('span').toggleClass('special1', 'special');
        return false;
    }).next().hide();
});

HTML:

<h3><span class="special"></span><a href="#">Heading 1</a></h3>
<ul>
    <li><a href="#">List one two there</a></li>
    <li><a href="#">List one two there</a></li>
    <li><a href="#">List one two there</a></li>
    <li><a href="#">List one two there</a></li>
    <li><a href="#">List one two there</a></li>
    <li><a href="#">List one two there</a></li>
    <li><a href="#">List one two there</a></li>
</ul>

​

Answer 1

Use $(this).find('span') not $(this).next('span')