关于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 相关文章推荐
jquery ajax abort()的使用方法
Oct 28 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
Vue核心概念Getter的使用方法
Jan 18 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
一个简单的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实现的贪婪算法实例
2017/10/17 PHP
php和html的区别点详细总结
2019/09/24 PHP
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
Python中return语句用法实例分析
2015/08/04 Python
Python延时操作实现方法示例
2018/08/14 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
水电工岗位职责
2014/02/12 职场文书
《口技》教学反思
2014/02/21 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
2014年会策划方案
2014/05/11 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
继续教育个人总结
2015/03/03 职场文书
党员带头倡议书
2015/04/29 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
公司职员入党自传书
2015/06/26 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript