关于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实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
javascript中Number的方法小结
Nov 21 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 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 快速排序算法详解
2014/11/10 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
python字符串连接方式汇总
2014/08/21 Python
Python中作用域的深入讲解
2018/12/10 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
Python 绘制可视化折线图
2020/07/22 Python
python定义类的简单用法
2020/07/24 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
高一英语教学反思
2014/01/22 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
Pandas数据类型之category的用法
2021/06/28 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
mysql数据库实现设置字段长度
2022/06/10 MySQL