如何在jquery中组合2个div？答案

【问题标题】：How to combine 2 divs in jquery?如何在jquery中组合2个div？
【发布时间】：2017-06-15 03:12:16
【问题描述】：

这就是我所拥有的。 enter image description here #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');
      }
    }   
  );
}

【问题讨论】：

标签： javascript jquery json servlets

【解决方案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 - 所以请确保它不在循环中，否则可能会出现许多“操作”。

【讨论】：

【解决方案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，请查看 this 帖子。

【讨论】：

【解决方案3】：

您在循环中放置了一个 ajax 请求，这真的不推荐。除非您希望您的服务器迟早会遭受 DDOS 症状。

您还缺少 act 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');
         }
      }
    }   
);

【讨论】：