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

问题描述

我有一个简单的衰落内容滑块，从图像显示到div。它可以正常工作，但我想添加的内容如下：
$ b $ ol

计算（直接）子元素

添加一个圆点（带有类名imgdotholder的div）到父div（类名为showContainer）。类别名称imgdots）为每个孩子在div。

标记示例：

 < div class =showContainer> 
< div>直接子元素1< / div> 
< div>直接子元素2< / div> 
< div>直接子元素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>直接子元素1< / div> 
< div class =blah>直接子元素2< / div> 
< div class =blah>直接子元素3< / div> 
< / div> 
< / div> 
  

重新运行我的问题，我需要执行以下操作：
1）需要计算showContainerdiv
中的子元素2）然后需要添加一个名为imgdotholder的div到wrapperdiv
3）在imgdotholderdiv内我需要为每个图像添加一个点（用一个叫做imgdots的div来表示） - 假设有3个图像，那么我需要添加3个点

这里有一个jsfiddle基本设置：

$ b $你需要创建一个迭代值为 imgCount 的循环：

$ b
$ b

  var imgCount = $（'。showContainer'）。children（）。length; //注意：children（）
 for（var i = 0; i< imgCount; i ++）{
 $（'< div class =imgdotholder>< div class =imgdots >< / DIV>< / DIV> '）appendTo（' showContainer'）; 
} 
  

I have a simple fading content slider, displaying from images to divs. It works fine, but what I would like to add is the following:

1. Count the (direct) child elements
2. Add a dot holder (div with a class name "imgdotholder") to the parent div (with class name "showContainer").
3. Add a dot (div with a class name "imgdots") for each child in the div.

Exmple of markup:

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

This is all I've got so far, any help would be much appreciated!

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

EDIT I forgot to add something:Exmple of markup again:

<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>

A re-run at my problem, I need to do the following:1) Need to count the child elements in the "showContainer" div2) Then need to add a div called "imgdotholder" to the "wrapper" div3) Inside of the "imgdotholder" div I need to add a dot (represented by a div called "imgdots") for each image - say there are 3 images then I need to add 3 dots

Here is a jsfiddle with the basic setup: http://jsfiddle.net/Reinhardt/cgt5M/

解决方案

You need to create a loop which iterates for the 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');
}

这篇关于在div中的儿童点。一个jQuery头痛的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！