关于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 相关文章推荐
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
js倒计时简单实现代码
Aug 11 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
一个简单的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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
Python之修改图片像素值的方法
2019/07/03 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
小学生家长评语大全
2014/02/10 职场文书
信用卡工资证明格式
2014/09/13 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
答谢词范文
2015/01/05 职场文书
2015年班组工作总结
2015/04/20 职场文书
公司出差管理制度范本
2015/08/05 职场文书
超市店长竞聘书
2015/09/15 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
创业计划书之校园超市
2019/09/12 职场文书