如何在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');
         }
      }
    }   
);