jquery - 选择唯一ID

Question

i'm new to jquery

i generated html div with php and give each them a unique id

<div id=div1>text</div>
<div id=div2>text</div>
<div id=div3>text</div>
...

the problem is, how I select specific div with jquery? usually i use this code to select an element

$('#id')

but I have to make alot of selector because each id is unique. Recently I used something like this

<div ... onclick=getElem(id)></div>

function getElem(id){
     var elem=$('#div'+id);
} 

Is it good to use onclick ?

Answer 1

Add a class to the group of divs

<div id="div1" class="someClass">text</div>
<div id="div2" class="someClass">text</div>
<div id="div3" class="someClass">text</div>
...

Then in javascript:

$('.someClass').click( function(event) {
    var ele = $(this);
    // ele is the element you clicked on
});

Answer 2

I can't tell what your real use-case is, but you shouldn't need the IDs anyway. Give all elements you want to handle clicks for a class:

<div class="some-group"></div>
<div class="some-group"></div>
<div class="some-group"></div>

Then just watch for clicks on the group:

$('.some-group').click(function(){
// do something with $(this).attr('id');
});

Answer 3

Add a class to the div elements:

<div id="div1" class="myDivClass">text</div>
<div id="div2" class="myDivClass">text</div>
<div id="div3" class="myDivClass">text</div>

Then you can iterate each element if you need to operate on each item separately

$('.myDivClass').each(function(){
   // Process each item found that use the myDivClass 
   $(this).text("set a new text");
});

Or you can operate on all element at once

$('.myDivClass').text("set text on all elements");

This means that you can set a click callback to all using:

$('.myDivClass').click(function(){
  // Your click handler for ALL elements with myDivClass

});

or on each item separately, allowing to include some additional handling

$('.myDivClass').each(function(){
   // Here u could do some checks
   var id = $(this).attr('id'); // or $(this).prop('id') // depends on jquery version

   if(id !== "div1"){
      $(this).click(function(){
        // Click handler for each item
      });
   }
});