如何在jQuery中合并2个div？

Question

这就是我所拥有的。 在此处输入图片描述 #Image可以正常运行，但#act不能。 #act应该在符合Servlet要求的每个文章（图片）的底部写ACTION（如果data！= null）。 不幸的是，我在第一张图片的底部有ActionAction。 我应该纠正什么？ 抱歉我的英语不好。

for(var i = 0; i<data.length; i++){                             
  $("#image").append(
    "<div class=divovi id="+data[i].sifra+">" +
    "<div><img width=150 height=150 border=2 align=middle id=\"slikaID\" src="+data[i].slika+" /></div>" +
    "<div>"+data[i].naziv+"</div><div id=act></div></div>"
  );
  $.post("http://localhost:8080/Projekat/DaLiJeNaAkcijiServlet",
    {
      data:JSON.stringify({ naslov:data[i].sifra})
    },
    function(data,status){
      if(data!=null) {
        $("#act").append('ACTION');
      }
    }   
  );
}

Answer 1

HTML ID必须是唯一的，即只能使用一次。

如果您更改"<div>"+data[i].naziv+"</div><div id=act></div></div>"); 到"<div>"+data[i].naziv+"</div><div class=act></div></div>"); （并相应地更新CSS），然后您应该可以使用$(".act").append('ACTION'); 只需将一次附加到该类的所有div-因此请确保它不在循环中，否则可能会出现许多“ ACTIONS”。

Answer 2

id仅对一个元素唯一。 改用类。

for(var i = 0; i<data.length; i++){                             
                                $("#image").append(
                                        "<div class=divovi id="+data[i].sifra+">" +
                                        "<div><img width=150 height=150 border=2 align=middle id=\"slikaID\" src="+data[i].slika+" /></div>" +
                                        "<div>"+data[i].naziv+"</div><div class='act'></div></div>");   // id=act => class='act' 

                                $.post("http://localhost:8080/Projekat/DaLiJeNaAkcijiServlet",
                                        {

                                        data:JSON.stringify({
                                            naslov:data[i].sifra
                                        })
                                        },
                                        function(data,status){ 
                                            if(data!=null) {
                                                $(".act").append('ACTION'); // #act => .act

                                            }

                                        }           
                                );

                            }

要了解有关何时使用Id和何时使用Class的更多信息，请查看这篇文章。

Answer 3

您将ajax请求放入循环中，实际上不建议这样做。 除非您希望服务器早晚遭受DDOS症状困扰。

您还缺少行为div的个人ID，这是造成问题的主要原因。

for(var i = 0; i<data.length; i++){                             
  $("#image").append(
    "<div class=divovi id="+data[i].sifra+">" +
    "<div><img width=150 height=150 border=2 align=middle id=\"slikaID\" src="+data[i].slika+" /></div>" +
    "<div>"+data[i].naziv+"</div><div id='act+"i"'></div></div>"
  );
}
$.post("http://localhost:8080/Projekat/DaLiJeNaAkcijiServlet",
    {
      data: JSON.stringify({ naslov:data })
    },
    function(data,status){
      for(var i = 0; i<data.length; i++) {
         if(data[i].sifra!==null) {
           $("#act"+i).HTML('ACTION');
         }
      }
    }   
);