Jquery - Onclick将div插入细分

时间:2013-04-29 13:00:49

标签: php jquery html

以下函数在“edit”类的每个主div上附加一个包含图像的div。

我需要插入点击一个div到c。$ k class的每个子目录中。 c1 / c2类的所有子div都有唯一的id。

基本上我需要在每个子div中显示一个rrdtool创建的图,它表示具有唯一IP的设备。 (sub-div的id)

换句话说,我需要从每个类c。$ k div获取id并在var y上将其用作'ipx',

然后

插入一个新的div class ='graph'到每个类c。$ k div中。所以我们可以忽略我的函数(ipx)中的第二个参数,因为它不相关。我需要使用div class ='edit'中的“children”id。

这是我第一次使用jquery时,任何帮助都非常受欢迎。

function edit_mode(idname,ipx) {
    var x = document.getElementById(idname);
    $(x).toggle( "fade" );
 //   var subdivid = $("#idname").children("div");
    var y = 'http://domain.com/index.php?ip='+ipx;
    $("#"+idname+" img:last-child").remove();
    $("<div class='graph'><img src='"+y+"'></div>").appendTo(x);
};

PHP代码:

 $k=1;
    $t="";
    while($row = mysql_fetch_array($result)){
          if ($row['id'] != $t) {
                if ($t != "") {echo "</div>";}
                echo "<div onclick=\"edit_mode('".$row['idDevice']."','".$row['IP']."')\">".$row['name']."  ".$row['IP'] ."</div><br><div class=\"edit\"  id=\"".$row['idDevice']."\">";
      $t = $row['id'];
      $k = 1;
          }
    echo "<div id=\"".$row['IP']."\" class=\"c".$k."\"><form method=\"post\" action=\"edit.php?idDevice=".$idDevice."\">";
    .................................................................
    echo "</form></div>";
    $k = 1+($k % 2);
    }

我做到了这一点:

function edit_mode(idname) {
    var x = document.getElementById(idname);
    $(x).toggle( "fade" );
    var subdivid = $.map($('#idname > div'), function(child) { return child.id; }); 
    var y = 'http://domain.com/index.php?ip='+subdivid;
    $("#"+idname+" img:last-child").remove(); 
    var el = document.createElement('div');
            el.className="graph";
            el.innerHTML = '<img src='+y+'>' ;
            document.getElementById(subdivid).appendChild(el);

这正是我想要的,除了那个有一个孩子的一个父div。现在的问题是:当我动态创建带子项(divivid)的div(idname)数组时,如何修改此函数。

谢谢

1 个答案:

答案 0 :(得分:0)

从我所看到的第二个参数到edit_mode的是具有类id的子div的c.$k,因此您可以使用它来附加带图像的div

function edit_mode(idname,ipx) {
    var x = document.getElementById(idname);
    $(x).toggle( "fade" );
 //   var subdivid = $("#idname").children("div");
    var y = 'http://domain.com/index.php?ip='+ipx;
    $("#"+idname+" img:last-child").remove();
    $("<div class='graph'><img src='"+y+"'></div>").appendTo('#' + ipx);
};