CODEWITHSUNDEEP
jqueryonclick
Satch3000
Satch3000

Reputation: 49384

JQuery onclick target (this li span)

I have this html:

<div id="homepage-side-nav">
    <ul class="nav">
        <li class="cell"><a href=""><img src="images/home-btn1.gif" alt="" /><span>Link </span></a></li>
        <li class="cell"><a href=""><img src="images/home-btn2.gif" alt="" /><span>Link </span></a></li>
    </ul>
</div>

I want to target the span of the li that I've clicked on.

Here's the code:

 $("#homepage-side-nav .cell").click(function(){

       $(this).animate({width:'225px'},200).css("background-color","#e5e6e7");

       $(this).mouseout(function() {

          $(this .span).hide();

        });

  });

There's a problem here where I need to animate the span and not the li that I've clicked on ... How can I get it right?

Upvotes: 2

Views: 1390

Answers (2)

Tyler Morrow
Tyler Morrow

Reputation: 961

Try this instead.

HTML

<div id="homepage-side-nav">
    <ul class="nav">
        <li class="cell">
            <a href="#">
                <img src="images/home-btn1.gif" alt="" />
                <span>Link </span>
            </a>
        </li>
        <li class="cell">
            <a href="#">
                <img src="images/home-btn2.gif" alt="" />
                <span>Link </span>
            </a>
        </li>
    </ul>
</div>

JS

$("#homepage-side-nav .nav .cell").click(function(){
    $(this).find('a span').animate({width:'225px'},200).css("background-color","#e5e6e7");
    $(this).mouseout(function() {
        $(this).find('a span').hide();
    });
});

https://jsfiddle.net/4kfwha44/2/

Note about your original HTML/JS:
- The first selector you have $("#homepage-side-nav .cell") doesn't actually attach the click event properly because the cell class is not a child of the div with ID homepage-side-nav.

Upvotes: 2

Mr.Web
Mr.Web

Reputation: 7144

You are to go to the specific item:

$(this).find('span').animate({width:'225px'},200).css("background-color","#e5e6e7");

This way you get the this and go to the inner element span.

Doc: https://api.jquery.com/find/

Upvotes: 1

Related Questions