关于jQuery判断元素是否存在的问题示例探讨


Posted in Javascript onJuly 21, 2014

是这样的,最近做jQuery训练时遇到jQuery判断元素是否存在时出现问题.

题目如下:请在"选择按钮3"后面,添加Id=rad4,处于选择状态的,之后文字为"选择按钮4"的HTML控件,只能添加一次(自由选择使用js原生或JQuery实现

function addradio() 
{ 
if (!document.getElementById("rad4")) 
{ 
var main = document.getElementById("radioContainer"); 

var input = document.createElement("input"); 
input.setAttribute("type", "radio"); 
input.setAttribute("id", "rad4"); 
var span = document.createElement("span"); 
var txt = document.createTextNode("选择按钮4"); 
span.appendChild(txt); 
main.appendChild(input); 
main.appendChild(span); 
} 
}

判断对象是否存在这样就够了。if (!document.getElementById("rad4"))但是jQuery中 if (!$("#rad4"))却是永假的的 楼楼以为 跟javascript一样事实并非如此

在jQuery中。一旦被$("")包装器 包装起来 就是一个对象 不是null或未定义 所以!$("#rad4")

永远是false 。正确做法如下

包装器中如果没有对象那么长度就为0;只需要这样就ok了

$(function () 
{ 

$(".domtree div:eq(6) input:eq(1)").click(function () 
{ 
if ($("#rad4").length < 1) 
{ 
$("<input type='radio' id='rad4'> <span>选择按钮4</span>").appendTo($("#radioContainer")); 
} 
} 
) 

} 
)
Javascript 相关文章推荐
JS基础之undefined与null的区别分析
Aug 08 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 #Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 #Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 #Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 #Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 #Javascript
jquery显示隐藏input对象
Jul 21 #Javascript
jquery实现保存已选用户
Jul 21 #Javascript
You might like
php unicode编码和字符串互转的方法
2020/08/12 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python for循环生成列表的实例
2018/06/15 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
python 消费 kafka 数据教程
2019/12/21 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
员工生日会策划方案
2014/06/14 职场文书
2014年财务部工作总结
2014/11/11 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript