javascript - div 中的 child 点。令人头疼的 jQuery

Question

我有一个简单的淡入淡出内容 slider ，从图像显示到 div。它工作正常，但我想补充的是:

1. 计算(直接)子元素
2. 向父 div(类名为“showContainer”)添加点容器(类名为“imgdotholder”的 div)。
3. 为 div 中的每个子项添加一个点(类名为“imgdots”的 div)。

标记示例:

<div class="showContainer">
    <div>Direct Child element 1</div>
    <div>Direct Child element 2</div>
    <div>Direct Child element 3</div>
</div>

这就是我到目前为止所得到的，如果有任何帮助，我们将不胜感激!

var imgCount = $('.showContainer').childern().length;
$('<div class="imgdotholder"><div class="imgdots"></div></div>').appendTo('.showContainer');

编辑我忘了添加一些东西: 再次标记示例:

<div class="wrapper">
    <div class="showContainer">
        <div class="blah">Direct Child element 1</div>
        <div class="blah">Direct Child element 2</div>
        <div class="blah">Direct Child element 3</div>
    </div>
</div>

重新运行我的问题，我需要执行以下操作: 1)需要统计“showContainer”div中的子元素 2)然后需要在“wrapper”div中添加一个名为“imgdotholder”的div 3) 在“imgdotholder”div 内，我需要为每个图像添加一个点(由一个名为“imgdots”的 div 表示)- 假设有 3 张图像，那么我需要添加 3 个点

这是一个带有基本设置的 jsfiddle:http://jsfiddle.net/Reinhardt/cgt5M/

Answer 1

您需要创建一个循环来迭代值 imgCount :

var imgCount = $('.showContainer').children().length; // note: children()
for (var i = 0; i < imgCount; i++) {
    $('<div class="imgdotholder"><div class="imgdots"></div></div>').appendTo('.showContainer');
}