Fire click event for only one element with same class name

Question

I have multiple div's with the same class name: ag-list-item

<!-- item one -->
<div class="ag-list-item">
</div>

<!-- item two -->
<div class="ag-list-item">
</div>

<!-- item three -->
<div class="ag-list-item">
</div>

They are dynamically created through an angular grid library I'm using, so I cannot set an ID attribute for any specific one.

I'm looking for a way to target only one specific div with the class name through a click event.

$('.ag-list-item').click() executes on all three elements; is there a way to only target one?

Update: 09/09/15

I found a solution that allows for specific index selection of a collection of div's with the same class, using the :eq() selector.

// select .ag-list-item at index 1
$('.ag-list-item:eq('1')').click();

Yes, this is the solution I have thought. But in my fiddle test, I forgot the simple quote around the number : eq('1'), so I hadn't post it. Anyway, delight to have helped :) — Ɛɔıs3
– Ɛɔıs3, Commented Sep 9, 2015 at 19:37

Ɛɔıs3 · Accepted Answer · 2015-09-10 07:29:57Z

3

As promised, I have done an update of my post.

$(document).ready(function () {

    // If you want to select the first element :
    $('.ag-list-item:first span span').click(function () {
        // Your code
    });

    // If you want to select the second element, in this example
    // Don't forget the quotes around the desired number
    $('.ag-list-item:eq("1") span span').click(function () {
        // Your code
    });

    // If you want the last element :
    $('.ag-list-item:last span span').click(function () {
        // Your code
    });

)};

Please find the JSFIDDLE associated to this example (I have put some design style to a better understanding)

edited Sep 10, 2015 at 7:29

answered Sep 9, 2015 at 14:32

Ɛɔıs3

7,98511 gold badges54 silver badges84 bronze badges

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

7 Comments

Kyle Over a year ago

That is exactly what I needed! Thanks!

KrakenDev Over a year ago

Are the clicks for the span with the class ag-visible-icons?

Ɛɔıs3 Over a year ago

@KrakenDev It is not specified in the question

KrakenDev Over a year ago

I'm assuming because ag-list-item span span would end up on the icons class, my answer requires knowing if that is the targeted class

hopkins-matt Over a year ago

@Kyle.Belanger KrankenDev's vanilla JS answer allows you to use a specific index

|

KrakenDev · Accepted Answer · 2015-09-09 14:45:55Z

2

If you want a pure Javascript solution for speed, this could do the trick:

var els = document.getElementsByClassName('ag-visible-icons');

els[0].addEventListener('click', function() {
  // Do something
});

For jQuery you could try:

$('.ag-visible-icons').first().click(function() {
  // Do somehting
});

This is assuming the class you showed the the '.ag-list-item:first span span' path is the ag-visible-icon class

answered Sep 9, 2015 at 14:45

KrakenDev

1969 bronze badges

3 Comments

Kyle Over a year ago

That vanilla JS example would be great but it's not actually firing a click event for me

KrakenDev Over a year ago

@Kyle.Belanger It should be, are you using Chrome? I tested it in JsFiddle before posting it and put some text inside the .ag-visible-icons span and then alerted that text on click and it worked.

KrakenDev Over a year ago

Here you go, this will ONLY alert FOO (clicking first span) jsfiddle.net/4m4jobz2

Collectives™ on Stack Overflow

Fire click event for only one element with same class name

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related