0

Lets assume we have the following code: 

<a class="addproduct 151">product info</a>
<a class="addproduct 151">product info</a>
<a class="addproduct 151">product info</a>
<a class="addproduct 151">product info</a>
<a class="addproduct 151">product info</a>

I want to be able to count how many of the same class is in the page. Then upon clicking a specific one, it tells me which one it is... so... if I click the 3rd one down it will print a "3" to the console.

I've got this code so far:

$("addproduct 151").each(function(index) {
  $(this).addClass('number' + index);
});
Posz
  • 83
  • 1
  • 7
  • Why do you need this? You can use `eq()` to determine the index of an element, or DOM traversal to get to related elements within. Incremental identifiers are never the best plan. – Rory McCrossan May 01 '14 at 12:55
  • Oh perfect, see I'm learning now, I didn't know this before. Can you let me know how this code would look for the wanted result? – Posz May 01 '14 at 12:56
  • Add a click handler for the elements, and put `console.log($(this).eq());` in it. – Rory McCrossan May 01 '14 at 13:01
  • Should the numbering be page wide or within their immediate parent node? – Ja͢ck May 01 '14 at 13:05
  • If you're trying to create a relationship between your `A` elements, and a dataset, I'd suggest using [data-attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) instead of trying to find an ID based on the element's offset in the DOM. Ex: `product info`. Then grab that data attribute in your click handler `var id=$(this).data('id');`. – Walter Stabosz May 01 '14 at 13:16
  • I can't edit the page, this all have to be unobtrusive. I'm trying to create variables to place in google analytic tags. When the specific link is clicked I need to send a "1" "2" "3" etc to google analytics. – Posz May 01 '14 at 13:19
  • @RoryMcCrossan I did what you said but I'm stupid when it comes to new code. I have this: $('.addproduct.151').click(function() { console.log($(this).eq()); }); I still don't know how to print out which one is clicked onto the screen. – Posz May 01 '14 at 13:38

3 Answers3

3

You can use length and index to get those numbers

var elems = $(".addproduct.151")

elems.on('click', function() {

    var total    = elems.length;
    var this_one = elems.index(this);

});

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
0

Use index() if it has a parent.

$('#parentDiv a').on('click',function(){
    var thisNumber = $(this).index();
    console.log(thisNumber);
});

http://jsfiddle.net/XSk98/

timo
  • 2,119
  • 1
  • 24
  • 40
0

To answer your question as it is originally worded "if I click the 3rd one down" which I interpret as the 3rd element with that class anywhere on the page regardless of parentage:

$('.product').on('click', function(e) {
  var products = $('.product').toArray();
  var id = products.indexOf(this);
  console.log(id);
})

http://jsfiddle.net/r4NJT/1/

Note: The index starts at 0, so if you want to print out "3", you'd have to print index+1;

Walter Stabosz
  • 7,447
  • 5
  • 43
  • 75
  • Thankyou for your response, it works great on fiddle. I'm just unsure why when I use it on my site I get a "TypeError: undefined is not a function" Just frustrating. I guess I'll have to figure this one out. Thanks again! – Posz May 01 '14 at 13:56
  • My guess is you're trying to use the variable `$` as a function before it's been defined as one ... did you put this code in a script block that occurs before you include jquery.js ? You can duplicate the error via: `var x = undefined; x();` . Also maybe look at: http://stackoverflow.com/questions/7975093/typeerror-undefined-is-not-a-function-evaluating-document – Walter Stabosz May 01 '14 at 15:27