javascript - div 中的儿童点。一个 jQuery 头痛

Question

我有一个简单的渐变内容滑块，从图像显示到 div。它工作正常，但我想添加以下内容：

1. 计算（直接）子元素
2. 将一个点持有者（类名为“imgdotholder”的div）添加到父div（类名为“showContainer”）。
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）在里面我需要为每个图像添加一个点（由一个名为“imgdots”的 div 表示）的“imgdotholder”div - 假设有 3 个图像，那么我需要添加 3 个点

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

Answer 1

利用

totalSlides = $('.showContainer').length;

获得总幻灯片，然后通过循环构造一个 UL（包含你的点）

Answer 2

您需要创建一个循环来迭代 value 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');
}

Answer 3

你的意思是

$('.showContainer').children().each(function(){
    $(this).appendTo('<div class="imgdots"></div>');
});

编辑

让我们看看我是否明白

// Count of the direct children of .showContainer , If you need
var imgCount = $('.showContainer').length;

// Append the .imgdotholder to the .wrapper
$('.wrapper').append('<div class="imgdotholder"></div>');

// Iterate over all the children and in each step append an .imgdots to the .imgdotholder
$('.showContainer').children().each(function(){
    $('.wrapper .imgdotholder').append('<div class="imgdots"></div>');
});