Question

我无法弄清楚这里发生了什么。当我移动线条＆＃34; $（＆＃34;＃mc＆＃34;）。html（newdivid）;＆＃34;到函数的开头（在.clone（）staement之上）它可以工作，但函数的其余部分不起作用。如果我将此行移动到最后，就像现在一样，该函数的其余部分可以正常工作，但这条线不起作用。我很困惑。

<html>

<head>

    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        var newdiv;

        var divcntr = 1;

        var newdivid;

        $(document).ready(function() {

            $('#clone_button').click(function(){

                newdivid = divcntr++;

                //we select the box clone it and insert it after the box

                $("#origdiv").clone().appendTo('.maincontainer');

                newdiv = $('.maincontainer').children().last();

                newdiv.setAttribute("id", newdivid);

                $("#mc").html(newdivid);

            });
        });

    </script>

</head>

<body>

    <input type="button" value="Clone box" class="button" id="clone_button"/>

    <input type="button" value="Extra button" class="button" id="std_button" />

    <div class="internal" id="origdiv"></div>

    <div class="maincontainer" id="mc">sdfgdfg</div>

</body>

</html>

这是我的css ......

.maincontainer {
    margin: 20px auto;
    width: 100%;
    height: 800px;
    border-style: solid;
    border-width: 2px;
    background-color: cyan;
}

.internal {
    margin: 10px;
    display: inline-block;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    width: 200px;
    height:200px;
    background-color: red;
}

.button {
    width: 100px;
    height: 20px;
}

#clone_button {
    background-color: blue;
}

#std_button {
    background-color: yellow;
}

Answer 1

有一点是错误的：

newdiv.setAttribute("id", newdivid);

在您的代码中，newdiv指的是jQuery对象，而不是DOM元素，而jQuery对象不具有setAttribute方法。他们有一个attr方法：

newdiv.attr("id", newdivid);

您可以采取其他一些措施来改进该代码，例如：

将变量范围仅限于他们需要的地方，没有更广泛的
使用您已经拥有的克隆元素的引用，而不是使用.children().last()
可读地缩进代码

例如：

var divcntr = 1;

$(document).ready(function() {

    $('#clone_button').click(function() {
        var newdivid = divcntr++;

        $("#origdiv").clone()
            .attr("id", newdivid)
            .appendTo('.maincontainer');

        $("#mc").html(newdivid);
    });
});

另请注意，虽然全数字id值完全有效，但如果您需要在CSS选择器中使用它们，它们会很尴尬。您可以考虑更改

.attr("id", newdivid)

到

.attr("id", "x" + newdivid)

...或类似的，为了让生活更轻松，如果您将在CSS选择器中使用这些id值。

直播示例：

＆＃13;

var divcntr = 1;

$(document).ready(function() {

  $('#clone_button').click(function() {
    var newdivid = divcntr++;

    $("#origdiv").clone()
      .attr("id", newdivid)
      .appendTo('.maincontainer');

    $("#mc").html(newdivid);
  });
});

＆＃13;

<div id="origdiv">This is the div that gets cloned</div>
<hr>
<div class="maincontainer">
  This is the container the divs end up in
</div>
<hr>
<input type="button" id="clone_button" value="Clone">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

重新提问您发布HTML的最新问题：当然

$("#mc").html(newdivid);

行将消除克隆的div：您已将克隆的div附加到.maincontainer，即#mc。如果您在两个地方都使用相同的选择器来引用它，那么从一开始就清楚了。

如果你想在.maincontainer顶部设置一个计数器，你需要将它放在子元素中，如下所示：

<div class="maincontainer">
    <div id="mc"></div>
    sdfgdfg
 </div>

现在，#mc和.maincontainer不再引用相同的元素，您可以覆盖#mc的内容而不会覆盖.maincontainer＆＃ 39; s内容。： - ）

以下是您的代码的工作副本，仅 .attr更正并修复了#mc / .maincontainer：

＆＃13;

var newdiv;

var divcntr = 1;

var newdivid;

$(document).ready(function() {

  $('#clone_button').click(function() {

    newdivid = divcntr++;

    //we select the box clone it and insert it after the box

    $("#origdiv").clone().appendTo('.maincontainer');

    newdiv = $('.maincontainer').children().last();

    newdiv.attr("id", newdivid);

    $("#mc").html(newdivid);

  });
});

＆＃13;

.maincontainer {
  margin: 20px auto;
  width: 100%;
  height: 800px;
  border-style: solid;
  border-width: 2px;
  background-color: cyan;
}
.internal {
  margin: 10px;
  display: inline-block;
  border-style: solid;
  border-width: 2px;
  border-radius: 5px;
  width: 200px;
  height: 200px;
  background-color: red;
}
.button {
  width: 100px;
  height: 20px;
}
#clone_button {
  background-color: blue;
}
#std_button {
  background-color: yellow;
}

＆＃13;

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input type="button" value="Clone box" class="button" id="clone_button" />

<input type="button" value="Extra button" class="button" id="std_button" />

<div class="internal" id="origdiv"></div>

<div class="maincontainer">
  <div id="mc"></div>
  sdfgdfg
</div>

＆＃13;

Answer 2

首先，你正在研究一个jQuery对象来设置属性。您需要将其用作html对象，然后使用属性“attr”来设置id属性。如下：
var newdiv;

var divcntr = 1;

var newdivid;

$(document).ready(function() {

$('#clone_button').click(function(){

newdivid = divcntr++;

$("#origdiv").clone().appendTo('.maincontainer');

newdiv = $('.maincontainer').children().last();
$(newdiv).attr("id", newdivid);


$("#mc").html(newdivid);

});
});

当我调用.html（）函数

2 个答案: