Question

（HTML JS javascript) js 中如何得到本标签位于父标签中的第几个？

是这样的，如下程序：

HTML部分：
<div id='first'>
<div class="1"><div class="1_1"></div><div class="1_2"></div></div>
<div class="2"><div class="2_1"></div><div class="2_2"></div></div>
<div class="3"><div class="3_1"></div><div class="3_2"></div></div>
</div>
<div id='second'>
<div class="1" onclick="ppo(this)"><div class="1_1"></div><div class="1_2"></div></div>
<div class="2" onclick="ppo(this)"><div class="2_1"></div><div class="2_2"></div></div>
<div class="3" onclick="ppo(this)"><div class="3_1"></div><div class="3_2"></div></div>
</div>

js代码：
function ppo(th){
var first = document.getElementById(‘first’) . getElementsByTagName('div'); //得到子标签tagName的object
var second = document.getElementById(‘second’) . getElementsByTagName('div'); //得到子标签tagName的object
var first_length = first . length; //得到子标签长度
for(var i=0; i<first_length; i++){
first[i*3].className='no_click';//让所有的first标签中的子标签都使用一种class
second[i*3].className='no_display';//让所有 second标签中子标签都不显示
}
th.className = 'click'; 让按下的那个first标签中的子标签显示click的class
???.className = 'display'; //可是如何能让与其对应的second标签中对应的那个变成display 的class呢？
}

也就是说，我能通过什么方法，得到被点击的这个子标签位于父标签first中的第几位呢？

请朋友不吝赐教，先行感谢。

Answer 1

没有直接获取子元素在父元素的序号的方法，需要去循环比对的。
不过，你在循环设置className的时候可以直接把要控制div保存给要被点击的div呀,这样效率高得多
for(var i=0; i<first_length; i++){
first[i*3].className='no_click'; //
first[i*3].controlTo = second[i*3] ;
second[i*3].className='no_display';
}
这样first里面的div被点击，只要 被点击的div.controlTo 就能得到对应的要显示的second组的标签了，非常方便，执行效率也很高。
比如 某个div被点， 只要
th.className = "click" ;
th.controlTo.className = "display" 即可 ;

追问

啊哈！！
这个方法真不错啊！！
让我试试，成功必给分！

我想请问一下，controTo这个是一个属性吗？我在网上没找到关于它的的介绍呢？不过我试验过了，这种方法非常好，也很适用。如果方便的话，给我一个链接或者帮我复制一段关于controlTO的介绍好么？

Answer 2

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<div id="first">
<div>asdasfd</div>
<div>aafeefd</div>
<div>aykuukd</div>
<div>44sdkle</div>
<div>sfesfs</div>
</div>
<script>
$("#first div").click(function(){
alert($(this).parent().find("div").index($(this)));
});
</script>

jquery是一个轻量级的JS库，只有29kb，你复制下来即可运行，点击文本就可以获得当前的索引
jquery兼容性非常好，代码十分简单
$("#first div").click(function()这一句表示id为first下的所有div添加单击事件
$(this).parent().find("div").index($(this))这一句表示找到当前元素的父元素下的所有div，index表示在数组中索引当前元素

追问

感谢大家让我改变对jquery的印象，不过最近还是先不考虑它了，呵呵。谢谢您的热心帮助。不过forgcolor朋友的回答更贴近我要得到的答案，不好意思了。

Answer 3

没有直接获取子元素在父元素的序号的方法，需要去循环比对的。
不过，你在循环设置className的时候可以直接把要控制div保存给要被点击的div呀,这样效率高得多
for(var i=0; i<first_length; i++){
first[i*3].className='no_click'; //
first[i*3].controlTo = second[i*3] ;
second[i*3].className='no_display';
}
这样first里面的div被点击，只要 被点击的div.controlTo 就能得到对应的要显示的second组的标签了，非常方便，执行效率也很高。
比如 某个div被点， 只要
th.className = "click" ;
th.controlTo.className = "display" 即可 ;

Answer 4

方法1：这段HTML代码是不是服务器端脚本生成，加一个序号属性，这样最简单明了。
方法2：申请计数器变量，写循环在 currentNode.parentElement.children 集合中比对。
不过还是强烈建议用 jquery 选择器处理这类问题

追问

不但是自动生成，而且子标签中长度不定，就像权限一样，有某项权限就由服务器显示一个子标签，否则不显示。

采用循环的方式不错，我觉得值得一试，让我看看可行性。另外我不怎么喜欢用jQuery,毕竟现在主要还想多学些基本的东西。jQuery过段时间再说吧，另外每次刷新都要加载它，这是最占用服务器和网络资源的。