关于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 本地预览的简单实现方法
Feb 18 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
JQuery实现图片轮播效果
May 08 jQuery
JavaScript设计模式之代理模式详解
Jun 09 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
JavaScript中的null和undefined用法解析
Sep 30 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
VUE动态生成word的实现
Jul 26 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
Python3 修改默认环境的方法
2019/02/16 Python
使用python绘制温度变化雷达图
2019/10/18 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
会计应聘求职信范文
2013/12/17 职场文书
报到证丢失证明
2014/01/11 职场文书
学习经验演讲稿
2014/05/10 职场文书
旅游活动总结
2014/08/27 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
九寨沟导游词
2015/02/02 职场文书
股东出资协议书
2016/03/21 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript