Question

我有包含3个div元素的html标记。第一个父.parent和第一个.child和.child的第二个孩子可能有一个或多个孩子，即.children。当我点击“.child”中的最后一个“.children”时，它会克隆该特定.children并在点击的.children后追加。到目前为止还好。在此过程中，每行包含固定数量的.children。我希望在第一行中有3 .children然后在第二行2 .children和第三行1 .children。它从第4行开始。

我怎样才能做到这一点？

以下是我的代码

HTML

<div class="parent">
    <div class="child">
        <div id="1" class="children">
        </div>
    </div>
</div>

的JavaScript

$('body').on('click', '.children', function (e) {
    var clone = $(this).clone();

    $(this).after(clone);
});

这是JSFIDDLE

Answer 1

Here's an Example : For selecting nth child
$(document).ready(function(){
  $("div > span").css("background-color","yellow");
});
</script>
</head>
<body>    

<h2>What will $("div > span") select?</h2>

<h4>This div element has two direct child elements, p and span:</h4>
<div style="border:1px solid black;padding:10px;">
<p>This is a paragraph.</p>
<span>This is a text inside a span.</span>
</div>

<h4>This div element has one direct child element, p:</h4>
<div style="border:1px solid black;padding:10px;">
<p>This is a paragraph. <span>This is a span element, inside the paragraph.</span></p>
</div>

</body>
</html>

Answer 2

您可以使用闭包：

var rowLength = 3;
var nItemsInRow = 1;

$('body').on('click', '.children', function (e) {
    var clone = $(this).clone().removeClass('box-border');

    if (rowLength === nItemsInRow) {
       /* insert line break */
       /* ... */
       /* insert clone */
       /* ... */

       // now update counters
       --rowLength; if (rowLength === 0) rowLength = 3;
       nItemsInRow = 1;
    } else {
       $(this).after(clone);
       ++nItemsInRow;
    }

});

使用javascript / jquery以正确的顺序插入div元素

2 个答案: