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

Question

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>

@cVplZ hi, the issue that the answers provided do not answer my question. Your answer is a work around and it works but I'm asking exclusively to select a class by selecting only parts of the class name. — Daniel Ramirez-Escudero
– Daniel Ramirez-Escudero, Commented Nov 10, 2014 at 11:43

Miqdad Ali · Accepted Answer · 2014-01-28 09:40:06Z

1

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;
    });

answered Jan 28, 2014 at 9:40

Miqdad Ali

6,1577 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CRABOLO · Accepted Answer · 2014-01-28 09:28:15Z

0

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

just use $(this)

answered Jan 28, 2014 at 9:28

CRABOLO

8,82439 gold badges47 silver badges68 bronze badges

Comments

Milind Anantwar · Accepted Answer · 2014-01-28 09:29:32Z

0

You can use:

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

instead of

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

answered Jan 28, 2014 at 9:29

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Felix · Accepted Answer · 2014-01-28 09:32:40Z

0

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

answered Jan 28, 2014 at 9:32

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related