循环仅附加到一个元素而不是多个元素

时间:2017-09-22 17:15:02

标签: javascript jquery html5

所以我似乎无法完全弄清楚这一点。我想将按钮附加到没有空id的每个容器。所以在内容列表中有两个项目,我想添加按钮。问题是它只附加到列表中的最后一项。所以我的问题是为什么?以及如何解决它。

示例数据集

内容

0:{item_uuid: null, label: "11"}
1:{item_uuid: "49b661aa-222b-4c3c-a3cc-92db229c500e", label: "24"}
2:{item_uuid: null, label: "25"}
3:{item_uuid: null, label: "31"}
4:{item_uuid: "49b661aa-222b-4c3c-a3cc-92db229c500e", label: "43"}
5:{item_uuid: null, label: "44"}

守则

 for (var i = 0; i < contents.length; i++) {
      if (contents[i].item_uuid !== null) {
           $('#' + contents[i].label).append(button);
           button.setAttribute("class", "button");
      }
    }

2 个答案:

答案 0 :(得分:1)

您的代码有效,但在尝试将相同的按钮追加两次时,我得到了一些奇怪的结果,这就是我在循环中创建它的原因。您可能希望确保没有将相同的按钮附加到多个容器。

E.G

 for (var i = 0; i < contents.length; i++) {
      if (contents[i].item_uuid !== null) {
        var button = $('<button>blah</button>');
           $('#' + contents[i].label).append(button);
           //button.setAttribute("class", "button");
      }
    }

答案 1 :(得分:1)

可以在for循环中创建按钮对象。否则它使用相同的按钮实例,并仅附加到最后一个。

<script>
    function deleteConfirm(){
    var result = confirm("Are you sure to delete users?");
    if(result){
    return true;
    } else
      {
       return false;
    }
    }

     $(document).ready(function(){
     $('#select_all').on('click',function(){
     if(this.checked){
     $('.checkbox').each(function(){
        this.checked = true;
        });
    }else{
         $('.checkbox').each(function(){
            this.checked = false;
        });
    }
  });

$('.checkbox').on('click',function(){
    if($('.checkbox:checked').length == $('.checkbox').length){
        $('#select_all').prop('checked',true);
    }else{
        $('#select_all').prop('checked',false);
    }
}); 
});
  </script>
  <?php

     include("common/config.php");
     $output = '';

 if(isset($_POST["query"]))
    {
  $search =  $_POST["query"];


  $where = "id LIKE '%".$search."%'
       OR name LIKE '%".$search."%'
       OR email LIKE '%".$search."%'
       OR phone LIKE '%".$search."%' ";

 $query = $db->select(array("*"),"user","$where","","id desc","");


 }
  else
{
   $limit = 5; 

$page = '';
if (isset($_GET["page"] )) 
    {
    $page  = $_GET["page"]; 
    } 
else 
   {
    $page=1; 
   } 

  $record_index= ($page-1) * $limit; 

   $query = $db->select(array("*"),PREFIX."user", "", "", "id desc", "$record_index, $limit");
   }

if($query)
{

   $output .= '
    <div class="table-responsive">
    <form name="bulk_action_form" action="action.php" onSubmit="return 
   deleteConfirm();"/>
    <table id="result" class="table table bordered">
<tr>
 <th style="text-align: center !important;"><input type="checkbox" name="select_all" id="select_all" value=""/></th>
 <th style="text-align: center !important;">ID</th>
 <th style="text-align: center !important;">Name</th>
    <th style="text-align: center !important;">Email</th>
    <th style="text-align: center !important;">Phone</th>
    <th colspan="4" style="text-align: center !important;">Action</th>
</tr>';

foreach($query as $row)

 {
   $output .= '
   <tr align="center">
     <td align="center"><input type="checkbox"  name="checked_id[]"  
        class="checkbox" value="'.$row->id.'"/></td> 
     <td>'.$row->id.'</td>
     <td>'.$row->name.'</td>
     <td>'.$row->email.'</td>
     <td>'.$row->phone.'</td>
     <td><a href="edit-form.php?edit='.$row->id.'">Edit</a></td>
     <td><a onclick="return confirm(\'Are you sure to delete?\')" href="del.php?del='.$row->id.'">Delete</a></td>
   </tr>';
 }

  $output .= '</form></table><br /><div align="center">';  
  $total_pages = ceil($db->countfields("*","user") / $limit);  
    for($i=1; $i<=$total_pages; $i++)  
 {  
    $output .= "<span class='pagination_link' style='cursor:pointer; padding:8px; border:1px solid #ccc;' id='".$i."'>".$i."</span>";  
 }

    $output .= '</div><br /><br />';  
   echo $output;
 }

 else
 {
  echo 'Data Not Found';
 }

 ?>