CODEWITHSUNDEEP
javascriptjqueryclassjquery-selectors
Daniel Ramirez-Escudero
Daniel Ramirez-Escudero

Reputation: 4047

how to use last part of a class name to target with jquery

I have a common class name which repeats itself in different pages. As you can see the class name follows this convention:

article-number-slide-number

These links open a certain slide information. This number is different for each slide, therefore I would like to know if its possible to target

$('.hotspot').click(function() {
        $('...SLIDE-2').animate({right: "0"}, 500);
        return false;
    });

Is it possible to target the end of the class name of an element?

<div class="hotspots-image">

    <img class="image"
         src="IMG-SRC"
         alt=""
        />

    <h1 class="home-banner">
        <em>lala collection</em><br>
        white &amp; fluffy
    </h1>

    <a class="hotspot article-1-slide-2" href="#">
        <span class="hotspot-icon pp-icon icon-hotspot">&nbsp;</span>
        <span class="hotspot-label pp-icon icon-anime-left-arrow">article 1</span>
    </a>
    <a class="hotspot article-2-slide-2" href="#">
        <span class="hotspot-icon pp-icon icon-hotspot">&nbsp;</span>
        <span class="hotspot-label pp-icon icon-anime-left-arrow">article 2</span>
    </a>
    <a class="hotspot article-3-slide-2" href="#">
        <span class="hotspot-icon pp-icon icon-hotspot">&nbsp;</span>
        <span class="hotspot-label pp-icon icon-anime-left-arrow">article 3</span>
    </a>
    <a class="hotspot article-4-slide-2" href="#">
        <span class="hotspot-icon pp-icon icon-hotspot">&nbsp;</span>
        <span class="hotspot-label pp-icon icon-anime-left-arrow">article 4</span>
    </a>
    <a class="hotspot article-5-slide-2" href="#">
        <span class="hotspot-icon pp-icon icon-hotspot">&nbsp;</span>
        <span class="hotspot-label pp-icon icon-anime-left-arrow">article 5</span>
    </a>
    <a class="hotspot article-6-slide-2" href="#">
        <span class="hotspot-icon pp-icon icon-hotspot">&nbsp;</span>
        <span class="hotspot-label pp-icon icon-anime-left-arrow">article 6</span>
    </a>
</div>

Upvotes: 0

Views: 94

Answers (4)

Miqdad Ali
Miqdad Ali

Reputation: 6147

this will work for you, I dont know is it correct method

   $('.hotspot').click(function() {
        $("a[name$='slide-2']").animate({right: "0"}, 500);
        return false;
    });

Upvotes: 1

Felix
Felix

Reputation: 38102

Since the element you want to animate is also the element you want to click, you just need to use $(this) here:

$(this).animate({right: 0}, 500);

Btw, you don't need " around 0. Save 2 bytes :P

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can use:

$(this).animate({right: "0"}, 500);

instead of

 $('...SLIDE-2').animate({right: "0"}, 500);

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

$('.hotspot').click(function() {
        $(this).animate({right: "0"}, 500);
        return false;
});

just use $(this)

Upvotes: 0

Related Questions