jQuery 奇葩问题

oxsicn 发布于 2014/07/14 13:41
阅读 390
收藏 0

实际代码为 ajax获取页面 并取出需要的信息替换原页面

var ajaxData ="<!DOCTYPE html>" +
"<html lang=\"zh-CN\">" +
"<head>" +
"    <meta name=\"renderer\" content=\"webkit\">" +
"    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">" +
"    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />" +
"    <meta charset=\"utf-8\">" +
"    <title>测试</title>" +
"    <meta name=\"keywords\" content=\"\">" +
"    <meta name=\"description\" content=\"\">" +
"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">" +
"    <link rel=\"stylesheet\" type=\"text/css\" href=\"css/base.css\">" +
"    <link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\">" +
"</head>" +
"<body>" +
"    <div class=\"bg\" style=\"background-image: url(images/47ea96b4aff223110e41f4e7127faecf.jpg)\"></div>" +
"    <div class=\"text\">123123</div>" +
"</body>" +
"</html> ";

$('.bg',ajaxData).length

获取 $('.bg',ajaxData).length 得到的是0 也就是没有找到 .bg 可是明明有啊



以下是问题补充:

@oxsicn:$(ajaxData).html() 输出 null (2014/07/14 14:05)
加载中
0
胡萝卜炒肉
胡萝卜炒肉
我觉得应该是jquery.find方法的问题

当你创建一个jquery 对象时,使用find是找它的孩子

$(ajaxData)得到一个长度为20多的$对象,在find的时候,是以里面每个基对象为基础查找孩子。

而 class 为bg的div是基对象,所以find只能查找 bg里面的元素



胡萝卜炒肉
胡萝卜炒肉
回复 @arrowing : 大概是因为创建对象时,body/html等标签会被自动去除掉。得去看源码。body去除后,那个bg 的div自然不会是谁的孩子
Arrowing
Arrowing
jQuery.find查找子元素是没错 问题出在$(ajaxData)上,为何会返回所有子元素,正常情况是不会这样的,例如var ajaxData = "<div id='parent'><div id='son'></div></div>";console.log( $('#son', ajaxData) );
oxsicn
oxsicn
谢谢,我知道原因了
0
祺爸PiscDong
祺爸PiscDong
哦,还有这种写法吗?涨姿势了
oxsicn
oxsicn
$('.bg',ajaxData)等价于 $(ajaxData).find(".bg")
0
loyal
loyal
为毛要这么写....
oxsicn
oxsicn
要不怎么写?
0
真友
真友
试试  $('.bg',$( ajaxData)).length
oxsicn
oxsicn
回复 @朱宏青 : 不好用啊 TAT
oxsicn
oxsicn
不好用啊 TAT
朱宏青
朱宏青
我刚想这样说...
0
朱宏青
朱宏青
估计是这个字符串组装的html不被当作是DOM,所以jQuery操作的时候有点小问题.
0
mark35
mark35

ajaxData没插入到DOM中你怎么查找其中元素呢?

这样试试吧

$(ajaxData).find('.bg')



oxsicn
oxsicn
文档中说 $('.bg',ajaxData)等价于 $(ajaxData).find(".bg") 我也尝试过 不好用 TAT
0
朱宏青
朱宏青

找到一种方法.

将ajaxData这段东西插入到DOM树里,然后再以你这种方式找出来.

要不就循环$(ajaxData)这个数组,匹配class.

要不就正则吧...

朱宏青
朱宏青
回复 @鑫酱 : 估计是body这个标签被特殊处理了.略坑
oxsicn
oxsicn
不清楚啥bug 吧body替换成div就可以了
oxsicn
oxsicn
好吧 看来只能这样了
0
水牛叔叔
水牛叔叔
不能回答问题,但是你可以这样子写(js继行符):
'<div>\
  <span class="class1"></span>\
  <span class="class2"></span>\
</div'

oxsicn
oxsicn
我的是在网上找的在线转换 实际是ajax获取的
0
Arrowing
Arrowing
var ajaxData =
"<head>" +
"    <meta name=\"renderer\" content=\"webkit\">" +
"    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">" +
"    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />" +
"    <meta charset=\"utf-8\">" +
"    <title>测试</title>" +
"    <meta name=\"keywords\" content=\"\">" +
"    <meta name=\"description\" content=\"\">" +
"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">" +
"    <link rel=\"stylesheet\" type=\"text/css\" href=\"css/base.css\">" +
"    <link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\">" +
"</head>" +
"<body>" +
"    <div class=\"bg\" style=\"background-image: url(images/47ea96b4aff223110e41f4e7127faecf.jpg)\"></div>" +
"    <div class=\"text\">123123</div>" +
"</body>";

var tmpHtml = $('<html />');
tmpHtml.html(ajaxData);

console.log( $('.bg', tmpHtml).length );



返回顶部
顶部