blocks|key|5625251|text|在container.childNodes.lengt末尾添加h|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5625252|++++container.childNodes.length;|code-block|syntax|javascript|5625253|See+jsFiddle|5625254|对于直接的子级，请使用childElementCount|5625255|+++container.childElementCount;|5625256|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ensangalufu/r6HR7/^0|1|Q|0|0|0|C|0|0|B|H|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|N|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|Q|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

Add h at the end of <code>container.childNodes.lengt</code>

<pre><code> container.childNodes.length;
</code></pre>

<a href="http://jsfiddle.net/ensangalufu/r6HR7/" rel="nofollow">See jsFiddle</a>

For immediate child use <code>childElementCount</code>

<pre><code> container.childElementCount;
</code></pre>

blocks|key|1237109|text|给document.getElementById('container').childElementCount一次机会|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1237110|entityMap^0|1|1I|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Give <code>document.getElementById('container').childElementCount</code> a go

blocks|key|1234749|text|这是可行的:-)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1234750|var+container+=+document.getElementById('container');

var+count+=+0;
var+length+=+container.childNodes.length;

for+(var+i+=+0;+i+<+length;+i%2B%2B)+{
++++if+(container.childNodes[i].tagName+&&+
++++++++container.childNodes[i].tagName+==+'DIV')+{
++++++++count+%2B=+1;
++++}
}

alert(count);|code-block|syntax|javascript|1234751|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works :-)

<pre><code>var container = document.getElementById('container');

var count = 0;
var length = container.childNodes.length;

for (var i = 0; i &lt; length; i++) {
 if (container.childNodes[i].tagName &amp;&amp; 
 container.childNodes[i].tagName == 'DIV') {
 count += 1;
 }
}

alert(count);
</code></pre>

blocks|key|216467|text|给你：http://jsfiddle.net/2t3VJ/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|216468|var+container+=+document.getElementById('container'),+children+=+0;
for(+var+i=0,+c+=+container.childNodes,+l+=+c.length+;+i+<+l;+i%2B%2B+)+{

+++if(+c[i].nodeType+==+1+)+{+//+if+this+is+a+HTMLSomeELement+:)
+++++++children%2B%2B;
+++}
}

alert(+children+);|code-block|syntax|javascript|216469|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/2t3VJ/^0|3|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Here you go: <a href="http://jsfiddle.net/2t3VJ/" rel="nofollow">http://jsfiddle.net/2t3VJ/</a>

<pre><code>var container = document.getElementById('container'), children = 0;
for( var i=0, c = container.childNodes, l = c.length ; i &lt; l; i++ ) {

 if( c[i].nodeType == 1 ) { // if this is a HTMLSomeELement :)
 children++;
 }
}

alert( children );
</code></pre>

blocks|key|1237124|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1237125|document.getElementById('container').children.length|code-block|syntax|javascript|1237126|http://jsfiddle.net/pxfunc/MGnCG/|offset|length|1237127|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|X|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

try

<pre><code>document.getElementById('container').children.length
</code></pre>

<a href="http://jsfiddle.net/pxfunc/MGnCG/" rel="nofollow">http://jsfiddle.net/pxfunc/MGnCG/</a>

blocks|key|5625324|text|var+container+=+window.document.getElementById("container");
var+child_nodes+=+container.childNodes;
var+child_nodes_length+=+child_nodes.length;
var+count+=+0;
var+node;
var+i;
for+(i+=+0;+i+<+child_nodes_length;+i%2B%2B)+{
++++node+=+child_nodes.item(i);
++++if+(node.nodeType+===+1)+{
++++++++%2B%2Bcount;
++++}
}

window.alert(count);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|5625325|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var container = window.document.getElementById("container");
var child_nodes = container.childNodes;
var child_nodes_length = child_nodes.length;
var count = 0;
var node;
var i;
for (i = 0; i &lt; child_nodes_length; i++) {
 node = child_nodes.item(i);
 if (node.nodeType === 1) {
 ++count;
 }
}

window.alert(count);
</code></pre>

blocks|key|216503|text|对于想要任何元素的人(例如，不一定是最后一个)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|216504|var+wanted+=+document.getElementById('wanted');
var+index+=+[].indexOf.call(wanted.parentElement.children,+wanted);|code-block|syntax|javascript|216505|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For people who wants any element (e.g. not necessarily the last one)

<pre><code>var wanted = document.getElementById('wanted');
var index = [].indexOf.call(wanted.parentElement.children, wanted);
</code></pre>

blocks|key|5625408|text|很容易得到最后一个元素的位置……人们把事情搞得太复杂了。试试我的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5625409|function+getLastElPos(container)+{
+++return+container.childNodes.length;
}|code-block|syntax|javascript|5625410|它返回容器元素中的子节点的长度，长度表示最后一个元素(lol)。|5625411|你可以这样使用它：|5625412|var+container+=+document.getElementById('container');
var+lastElement+=+getLastElPos(+container+);

alert(+lastElement+);|5625413|它在所有浏览器中都能正常工作:)|5625414|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Its very easy to get the position of the last element ... people are making it so complicated... try my code

<pre><code>function getLastElPos(container) {
 return container.childNodes.length;
}
</code></pre>

it returns the length of the child nodes in the container element, and the length means the last element (lol).

you can use it like this:

<pre><code>var container = document.getElementById('container');
var lastElement = getLastElPos( container );

alert( lastElement );
</code></pre>

it works fine in all browser :)

How to get the position of last child in a element, I mean the number (the index)?

I want the code below to alert "4", since there is four elements.

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
 &lt;div id="div1"&gt;div1&lt;/div&gt;
 &lt;div id="div2"&gt;div2
 &lt;div id="child_div1"&gt;div2&lt;/div&gt;
 &lt;div id="child_div2"&gt;div2&lt;/div&gt;
 &lt;/div&gt;
 &lt;div id="div3"&gt;div3&lt;/div&gt;
 &lt;div id="div4"&gt;div4&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;

var container = document.getElementById('container'),
last_child_of_container = container.childNodes.length;

alert('position of last div is'+ last_child_of_container);

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

Get index/position of element in div - pure javascript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何获取元素中最后一个孩子的位置，我指的是数字(索引)？我希望下面的代码警告"4"，因为有四个元素。<!DOCTYPE html><html><head><title>Untitled Document</title></head><body><div id="container"> <div id="div1"...

问获取div纯javascript中元素的索引/位置
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取div纯javascript中元素的索引/位置EN