javascript - Fire click event for only one element with same class name - Stack Overflow

admin管理员组

文章数量:1404467

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

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

• javascript
• jquery
• html

Share Follow edited Sep 9, 2015 at 17:49 Kyle asked Sep 9, 2015 at 14:29 KyleKyle 1,17355 gold badges3131 silver badges5858 bronze badges 1

• 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 Commented Sep 9, 2015 at 19:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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)

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

本文标签： javascriptFire click event for only one element with same class nameStack Overflow