使用jQuery從PHP生成的列表中按ID調用各個Divs

Question

我在PHP中從數組生成div，因此：

echo "<div id='parentdiv'>";
 for($counter = 0; $counter < count($list); $counter++){
         echo "<div>".$list['important_info']."</div>";

   }
  echo "</div>";//parentdiv

我想為每個div獨立添加一些單擊功能，即單擊所執行的操作取決於div，更重要的是取決於數組的索引$ list。

我想給每個div一個基於它在PHP數組中的索引的id。 所以我可以做

echo "<div id='"."divindex_".$counter."'>".$list['important_info']."</div>";

其中“ divindex_”僅用於防止以數字開頭的id形式。

然后，我認為在jQuery中我可以為每個div編寫點擊函數。

但是問題是$ list的大小是可變的，所以我不知道有多少個div。 所以我在想什么，

 $("#parentdiv div").click(function(){
            var id = split($(this).attr('id').split("_")[1];//get the php index from the id
            //do something with the id, e.g. ajax or whatever
　　});

有一個更好的方法嗎？ 如果您認為我正在做的事情很奇怪而不是一個很好的主意，那么我理解。 但是我不知道該怎么做。 任何幫助表示贊賞。

Answer 1

只需使用：

$("#parentdiv div").click(function(){
            var id  = $(this).index(); //index of div, 0 based
            var val = $(this).text();  //content of div, if you need it
});

無需添加唯一ID ：）。

演示： http ： //jsfiddle.net/q9TaJ/

文件： http ： //api.jquery.com/index/

Answer 2

首先，請確保正確地轉義輸出：

echo '<div id="parentdiv">';
for ($counter = 0; $counter < count($list); $counter++){
    echo sprintf('<div data-id="%d">%s</div>',
        $counter,
        htmlspecialchars($list['important_info'])
    );
}
echo '</div>';//parentdiv

我還使用了一個名為data-id的特殊屬性，您可以使用以下代碼在jQuery中輕松訪問該屬性：

$('#parentdiv > div').on('click', function() {
    var id = $(this).data('id');
});

Answer 3

您可以將變量作為html屬性傳遞。 然后將click事件綁定到單個類。

<div class="divs" data-id="myid"></div>

在jQuery中

 $('.divs').click(function(){
console.log($(this).data('id));    
});