jQuery：遍历所有表行并显示具有特定类的每个单元格的弹出窗口

Question

Using JQuery, I am trying to iterate through all rows of a table and display a timed popup for every cell that has the class = "cell-which-triggers-popup".

The JQuery function below is only displaying a popup for the first cell found. How can I get it to display a popup for every cell with that class.

I have a working example here - jsfiddle

HTML:

    <div id="popup" data-name="name" class="dialog" title="Bar Crossing Alert!">
    <p></p>            
</div>
<table id="1" border="1">
     <tr>
       <th>Trip ID</th>
       <th>Status</th>
    </tr>
     <tr>
       <td class="cell-with-id">585</td>
       <td class="cell-which-triggers-popup">bar x</td>
    </tr>
         <tr>
       <td class="cell-with-id">444</td>
       <td class="closed">closed</td>
    </tr>
         <tr>
       <td class="cell-with-id">007</td>
       <td class="cell-which-triggers-popup">bar x</td>
    </tr>
         <tr>
       <td class="cell-with-id">987</td>
       <td class="open">open</td>
    </tr>
</table>

JQuery:

      $("tbody tr td.cell-which-triggers-popup").each(function() {
   var cell_value = $(".cell-with-id").html();
              setInterval(function() {
        showPopup(cell_value)    
     }, 3000);
  });

    function showPopup(tr_id){
        $("#popup").dialog({
            width: 300,
            /*height: auto,*/
            resizable: false,
                show: 'blind',
                hide: 'blind',
            open: function(){
                $(this).find("p").html('At Least 10 minutes has expired.<br />Please check the status of the<br />current Bar Crossing.<br />Trip Report ID: ' + tr_id)
            }
        });
    }

Answer 1

This is because the dialog is presenting the element with id="popup", and there's only one. If you want to pop up several dialogs, you'll need to create a new element each time:

var $dialog = $("#popup").clone();
$dialog.dialog( DIALOG_OPTIONS );

Answer 2

$(".cell-with-id") will select the first element from the matches. But what you need is the sibling td of the clicked element. Instead of using 'each' you can use a click event handler. And why do you need a setInterwel? This will trigger the showPopup in each 3000 ms. Even if user closes the popup it will reappear.

$("tbody tr td.cell-which-triggers-popup").click(function() {
      var cell_value = $(this).siblings(".cell-with-id").html();
        showPopup(cell_value)    

});

working fiddle jsfiddle