div 中的儿童点。一个 jQuery 头痛答案

【问题标题】：Dots for Children in div. A jQuery headachediv 中的儿童点。一个 jQuery 头痛
【发布时间】：2013-10-09 20:25:43
【问题描述】：

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

计数（直接）子元素
向父 div（类名为“showContainer”）添加一个点持有者（类名为“imgdotholder”的 div）。
为 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/

【问题讨论】：

childern 只是您的问题中的一个错字吗？
所需的 html 外观应该如何
见jsfiddle.net/arunpjohny/U6BMS/1
@RoryMcCrossan - 是的，抱歉，它应该是“孩子”
@ArunPJohny - 它基本上是一个盒子，点应该在盒子下面。请参阅此小提琴以了解基本布局和结构：jsfiddle.net/Reinhardt/cgt5M

标签： javascript jquery html image

【解决方案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');
}

【讨论】：

可以直接使用.each() 来代替 for 循环。
没错，尽管each 实际上是一个for 循环。它的真正威力在于遍历 jQuery 对象中的一组元素。
@RoryMcCrossan - 我忘了提到我在“包装”div 中有 showContainer。如果我这样写（并稍加修改）它可以工作。谢谢你！ var imgCount = $('.showContainer').children().length; // note: children() for (var i = 0; i < imgCount; i++) { $('<div class="imgdots"></div>').appendTo('.wrapper'); }
@RoryMcCrossan - 这就是我最终得到的结果：jsfiddle.net/Reinhardt/cgt5M/3
@RoryMcCrossan - 有没有办法向“imgdots”div 添加“活动”类/id（用于 css 样式）？ 举个例子：说im on image no4，那么第4个“imgdots”div应该是不同于其他的颜色。

【解决方案2】：

使用

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

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

【讨论】：

嗨帕特！创建循环是我迷路的地方。一个包含基本设置的小提琴......摆弄：jsfiddle.net/Reinhardt/cgt5M

【解决方案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>');
});

【讨论】：