
HTML 是这样的:
<div class="accordion"> <div class="spoiler"> <div class="content"> <p></p> <p>正文</p> </div> </div> </div> 因为正文外的 div 元素是插件生成的,总是会出现第一个多余的 p 元素,希望在后面加个 js 来去除。
上面的 HTML 段落从 .spoiler 开始的部分共 6 个排比,都在 .accordion 内。我在「正文」的 p 元素标签内加了 id="cleanX",X 是从 1 ~ 6 的数字,按顺序分布在 6 个排比的结构里面。
接着按如下写的 js,浏览器无报错,但没有效果:
<script> for (var i=1;i<7;i++) { function cleanTag(i) { var x = document.getElementById("clean"+i); var y = x[i]; y.parentNode.removeChild(1); } } </script> 问题在哪儿?要怎么解决这个问题呢?
1 ferrum 2017 年 8 月 9 日 你的函数执行了吗? 另外 getElementById 返回单个 Node 节点,不是数组。没有具体的 HTML,其实也不好看出真正的问题…… |
2 piku 2017 年 8 月 9 日 via Android 你的 for 里定义了一个 function,但是这个 function 在什么时候执行呢? |
3 leeg810312 2017 年 8 月 9 日 via Android function 不是闭包,根本没有执行 |
4 orcusfox 2017 年 8 月 9 日 (function(i){}) (i) |
5 Sanko 2017 年 8 月 9 日 via Android 没执行吧 |
6 qiayue PRO 一个函数定义了其次 |
7 blackywkl 2017 年 8 月 9 日 getElementById 返回的是 Dom 对象吧,为什么 x[i] ? |
8 chinvo 2017 年 8 月 9 日 函数没执行 |
10 Lax 2017 年 8 月 10 日 一个 function 声明了 6 遍 ;-> |
11 msg7086 2017 年 8 月 10 日 你定义了一个函数六次,并且一次都不去执行……? |
12 autoxbc 2017 年 8 月 10 日 我觉得一句话提示可能不够说明问题 1. 不应该在循环内部定义函数,效率很差,要这么写 var cleanTag = function(i) { // doSomething }; for(var i=1 ; i<7 ; i++ ) { cleanTag(i); } 2. 定义的函数并没有实际执行,没有传递参数 3. 如果希望函数获取外部的变量值(i),或者传递参数(实参),或者不定义形参,让函数内部代码在作用域链里查找 传递实参 (function(i){ // doSomething })(i); 从作用域链中查找 var i; (function(){ // doSomething with i })(); 4. 变量 x 存储的是 getElementById 的返回值,这是一个元素节点,就是你需要删除的节点,后面再赋值给 y 没有意义 5. removeChild 的参数是一个节点,不是数字或者索引值 删除 x 这么写 x.parentNode.removeChild(x); 需要达到题目中的目的,一般不用题目的做法,而是这样 [].slice.call( document.querySelectorAll('.content p') ).forEach(function(e){ if( e.textContent.trim() == '' ) e.parentNode.removeChild(e); }); 如果确实已经完成了添加 'clean' 标记,也可以这么写 [].lice.call( document.querySelectorAll('.content p[id^="clean"]') ).forEach(function(e){ e.parentNode.removeChild(e); }); 最后,楼主可能对自己的代码更亲切,按你的风格可以这样改 for(var i=1 ; i<7 ; i++ ) { (function(i){ var x = document.getElementById("clean"+i); if(x) x.parentNode.removeChild(x); })(i); } P.S. 虽然 js 给人一种上手就能写的感觉,不过如果已经写了几千行代码,最好找本书系统看一下,完全自己摸索会很快达到瓶颈。 |
13 b0x 2017 年 8 月 10 日 楼主已经从入门到放弃了 |
14 mingl0280 2017 年 8 月 10 日 强行在 for 里定义一个函数六次却不执行 233333 当然没报错 removeChild 用法也是错的。 而且完全看不出来这个函数干啥的。 正确做法: <script> for (var i=1;i<7;i++) { function cleanTag(i) { var x = document.getElementById("clean"+i); x.parentNode.removeChild(x); }(i); } </script> 或者 <script> for (var i=1;i<7;i++) { var x = document.getElementById("clean"+i); x.parentNode.removeChild(x); } </script> |
15 fox0001 2017 年 8 月 10 日 via Android 都说得很清楚了,我就不 BB 了 |
16 ZhLTE 2017 年 8 月 10 日 楼主加油-。- 该好好学习了 |
17 Anshi 2017 年 8 月 10 日 学会 debug 断点调试。 |
18 ahonn 2017 年 8 月 10 日 12 楼已经讲得很清楚了。建议你还是先去看书吧.. |