Question

<div>'.$i.'</div>

$i is auto generated by loop – which could lead to:

<div>'.$i.'</div>
<div>'.$i.'</div>
<div>'.$i.'</div>

etc. where each $i is different.

How do I get value of particular $i (using jQuery), when div is clicked.

In standard JS I would use onClick($i).
In jQuery I just do not know, how to pick that val.

Answer 1

If you don’t have any other way to identify the <div> elements, this would place a handler on every <div> on the page.

$('div').click(function() {
    var text = $(this).text();
    // do something with the text
});

The .text() method will return the text content for that <div>, (as well as any nested elements).

If you only wanted the click event on certain <div> elements, the best is to add a class, and select the correct ones based on that.

$('div.myClass').click(function() {
    var text = $(this).text();
    // do something with the text
});

HTML

<div class="myClass">'.$i.'</div>
<div class="myClass">'.$i.'</div>
<div class="myClass">'.$i.'</div>

<div>some other div</div>

If the <div> elements are all within the same ancestor element, you could use .delegate() instead, which will place one handler on the ancestor to handle all divs inside.

$('#parentID').delegate('div.myClass', 'click', function() {
    var text = $(this).text();
    // do something with the text
});

HTML

<div id="parentID">
    <div class="myClass">'.$i.'</div>
    <div class="myClass">'.$i.'</div>
    <div class="myClass">'.$i.'</div>
</div>

(Requires jQuery 1.4 or later)