js DOM操作 容易犯的错误
这样一段html片段
<select class="form-control" id="course_chapter" onchange="fill_course_section(this)"> <option value="0">--选择章节--</option> <option value="1">第一章 鲁迅</option> <option value="2">第二章 小石头记</option> <option value="3">第三章 白居易</option></select>
现在要做的是 把select下面的option删除掉,保留第一个
这是错误代码:
for( var i=1 ;i<=$("#course_chapter").children("option").length; i++ ) { $($("#course_chapter").children("option")[i]).remove(); }
结果很怪异,最后 白居易 那一条 没有被删除,经过一步一步观察 发现了问题
在执行第一次 remove后 , $("#course_chapter").children("option")的长度发生了变化 变小了,
改进代码:
var chapter_count = $("#course_chapter").children("option").length; for( var i=1 ;i<chapter_count; i++ ) { $($("#course_chapter").children("option")[i]).remove(); }
这次我把总数提出来了,不受 remove的影响而变化,再次执行代码,什么?? 第二条 option 没有被删掉?
我再次陷入了沉思。经过几秒中的思想斗争,我发现了问题。
本质问题还是跟上面一样,虽然总数提到外面了,但事实上select的长度随着删除会变短,当删除第一条后 变量i增加到2,而本身处于第二位的 小石头那一条 因为
上一条被删除而移到了第一,所以造成漏删。
最终改进代码( i =>1 ):
var chapter_count = $("#course_chapter").children("option").length; for( var i=1 ;i<chapter_count; i++ ) { $($("#course_chapter").children("option")[1]).remove(); }
js DOM操作 容易犯的错误的更多相关文章
- JS DOM操作(创建、遍历、获取、操作、删除节点)
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- js dom 操作
JS的DOM操作 1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...
- JS—DOM操作
节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...
- js——DOM操作(一)
DOM:Document Object Model 文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义 为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...
- JS DOM操作 函数 事件 阻止事件冒泡
一 函数 1.字符串函数 s.tolowerCase( ): -- 变小写 s.toupperCase( ): -- 变大写 s.substr( 2 , 8 ): -- 截取 ...
- JS DOM操作(五) Window.docunment对象——操作元素
定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling; -- 找 a ...
- JS DOM操作(三) Window.docunment对象——操作属性
属性:是对象的性质与对象之间关系的统称.HTML中标签可以拥有属性,属性为 HTML 元素提供附加信. 属性总是以名称/值对的形式出现,比如:name="value". 属性值始终 ...
- JS DOM操作(二) Window.docunment对象——操作样式
一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class 用在客户端 name 用在服务端 用 id 定位 -- ...
- JS DOM操作(一) 对页面的操作
DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...
随机推荐
- Hacking Box Droopy: v0.2
概述: 目标:get flag 下载链接: https://www.vulnhub.com/entry/droopy-v02,143/ 工具: kail linux 开工 1)扫描开道: # netd ...
- Android为TV端助力 完全解析模拟遥控器按键
public class VirturlKeyPadCtr { private static Instrumentation mInstrumentation; public static void ...
- Bootstrap-table表格初始化表格数据
一.项目说明 ①此项目是ASP.NET项目,开发语言是C# ②bootstrap-table使用需要下载对应的css和js插件 ③具体详情还需查看api文档 二.前端代码 <div class= ...
- Xamarin 打包生成 Android apk 文件
Visual Studio 支持 apk 发布 Xamarin.Forms项目或Xamarin.Android项目开发完成之后需要发布.比较常规的发布方式是生成 apk 文件,微软也考虑到开发者有发布 ...
- 在angular 6中使用 less
在angular 6中使用 less 新项目 ng new [appname] --style less 已有的项目 修改 *.css 文件及引用处后缀名为 less并在 angular.json 文 ...
- 测试系统工程师TSE需要具备的四项能力
文/杨学明 如今,国内所有的研发型的公司都有测试部门,无论测试团队大小,都有测试组长,测试经理,测试工程师等头衔,但随着产品和业务的质量要求越来越高,产品的市场竞争越来越激烈,公司领导对产品测试的要求 ...
- DataSnap 多层返回数据集分析FireDAC JSON
采用服务器返回数据,一种是返回字符串数据例如JSON,跨平台跨语言,任何语言调用都支持兼容,类似WEBService. 第二种是紧密结合c++builder语言,传输DataSet,可以是Client ...
- Spark之Yarn提交模式
一.Client模式 提交命令: ./spark-submit --master yarn --class org.apache.examples.SparkPi ../lib/spark-examp ...
- php去掉字符串的最后一个字符
php去掉字符串的最后一个字符 //例如 $str = "12,34,56,"; $newstr = substr($str,0,strlen($str)-1); //从第一位开始 ...
- SQLServer之PRIMARY KEY约束
PRIMARY KEY约束添加规则 1.在表中常有一列或多列的组合,其值能唯一标识表中的每一行,这样的一列或多列成为表的主键(PrimaryKey). 2.一个表只能有一个主键,而且主键约束中的列不能 ...