JQuery: what is an n click element

Question

So, in jQuery, I can find the total number of an element type with a length of .find ('selector'). but how do you know that n is from a common element?

ie: How can I get the information (n) that I clicked on the first or second (or nth) button?

eg:

<table class="table-edit-components">
    <tr>
        <td>
            <div class="resource-links">
                ...
            </div>
            <button type="button" class="add-resource-link"></button>
        </td>
        <td>
            <div class="resource-links">
                ...
            </div>
            <button type="button" class="add-resource-link"></button>
        </td>
    </tr>
</table>

Answer 1

You can use index()to find out which item number you clicked on

$( ".add-resource-link" ).index( this );

demo

$(".add-resource-link").click(function(){
var index = $( ".add-resource-link" ).index( this );
  
  console.log(index)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-edit-components">
    <tr>
        <td>
            <div class="resource-links">
                ...
            </div>
            <button type="button" class="add-resource-link">click</button>
        </td>
        <td>
            <div class="resource-links">
                ...
            </div>
            <button type="button" class="add-resource-link">click</button>
        </td>
    </tr>
</table>

Run code

Answer 2

You can use index()to get the position buttonyou clicked.

$('.add-resource-link').click(function(){
  var nButton = $('.add-resource-link').index(this);
  console.log('Button index is ' + nButton);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-edit-components">
    <tr>
        <td>
            <div class="resource-links">
                ...
            </div>
            <button type="button" class="add-resource-link">1</button>
        </td>
        <td>
            <div class="resource-links">
                ...
            </div>
            <button type="button" class="add-resource-link">2</button>
        </td>
    </tr>
</table>

Run code

Answer 3

You should use the jQuery index method .

$( "div" ).click(function() {
  // `this` is the DOM element that was clicked
  var index = $( "div" ).index( this );
  $( "span" ).text( "That was div index #" + index );
});

  div {
    background: yellow;
    margin: 5px;
  }
  span {
    color: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>

Run code

In your case, it will be something like this.

$("button").click(function() {
  console.log($('button').index(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-edit-components">
    <tr>
        <td>
            <div class="resource-links">
                ...
            </div>
            <button type="button" class="add-resource-link">One</button>
        </td>
        <td>
            <div class="resource-links">
                ...
            </div>
            <button type="button" class="add-resource-link">Two</button>
        </td>
    </tr>
</table>

Run code