关于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 验证身份证信息有效性
Mar 28 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 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初学者头疼问题总结
2006/07/08 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python验证码识别处理实例
2015/12/28 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
python实现静态服务器
2019/09/05 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
Python实现简单猜数字游戏
2021/02/03 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
大学生素质拓展活动方案
2014/02/11 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
书法社团活动总结
2015/05/07 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android