JQUERY判断元素是否存在

时间:2012-06-4 作者:剧中人

前一段时间小剧写了篇名为《谈谈小剧对“渐进增强与平稳退化”的理解【上】》的文章。随后就对小剧客栈进行JS调整。因为小剧客栈是直接忽略IE6的,所以调整主要针对的是:当JS不可用的情况,保证所页面提供给浏览者的元素皆可用,这一基本原则。

其实这一工作并没有太大难度,无非是让调用JS的元素都用JS自己生成,这样JS可用时调用JS的元素就会生成,反之则不会出现。

最让小剧引以为豪的是小剧客栈的“阅读模式”,原来的阅读模式按钮是写在HTML里的,考虑到“渐渐增强”原则,这个按钮也同样必须由JS生成。小剧所提出的方案是先用JQUERY判断页面中class为“.article”的元素是否存在,存在的话就在页面中生成“阅读模式”按钮,不存在则不生成。

前面都是题外话,下面说说JQUERY判断元素是否存在的问题

到了这一步就是大刀阔斧地书写代码的时候了,很自然的我写出下面的代码:

JQUERY判断元素是否存在

结果发现无论“.article”是否存在,按钮都会生成。然后我又把条件改为“$(".article")=ture”,结果与之前是一模一样的。

查了下JQUERY选择器才知道,无论“.article”是否存在“$(".article")”都有返回值的,而且不为0,并且选择器得到的内容实际是一个数组。

了解到这里我有了豁然开朗的感觉,其实只要判断“$(".article").length”是否大于零即可。于是我将代码改写为下面所示内容。

JQUERY判断元素是否存在

果然,只有页面存在“.article”,“阅读模式”按钮才会生成

如何书写判断元素是否存在的代码

其实很简单,只要写出下面的代码即可:

JQUERY判断元素是否存在

问题解决了,方法很简单,主要是要多思考。对于刚接触JQUERY的小剧来说,每一次进步都是另我兴奋的,希望这篇文章对你有用。