问一个jquery问题children()，是不是jquery的问题？

lawzk · 发表于 2012-10-27 20:25:16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("#abc").children(".selected").css("color", "blue");
});
</script>
</head>
<body>

<div id="abc">
<span>Hello</span>
<p class="selected">Hello Again</p>
<p> <--------为什么<p>中的元素会变为红色？
<div class="selected">And Again</div>
<span class="selected">aaAnd Again</span>
</p>
<div> <--------为什么<div>中的元素不变红色？不变红色我认为是符合jquery中的说明的。因为children不同于find，它只沿着DOM树向下遍历单一层级。但是为什么上面的<p>元素中的的内容会变红色呢？
<div class="selected">1</div>
<span class="selected">2</span>
</div>

<p>And One Last Time</p>
<p class="selected">hello</p>
</div>

</body>
</html>

说明在上面代码中。求指点、解惑

jeongee · 发表于 2012-10-27 23:41:13

你需要的不是children而是find
children只找子不找孙
find子孙都找

lawzk · 发表于 2012-10-28 11:33:45

这只是个例子。html代码只是为了说明问题，不是我要的结果。我想要问的是children为什么能找到

      <p>  <--------为什么<p>中的元素会变为红色？
            <div class="selected">And Again</div>
            <span class="selected">aaAnd Again</span>
      </p>

不是儿子级别的class=selected的内容。这是我想问的。

为什么将上面的代码<p>换成<div>就找不到。这个找不到我认为是符合children的说明的。但是换成<p>为什么能找到呢？它属于“孙子”这一级别的吧

燃雲 · 发表于 2012-10-28 13:20:15

这是XHTML语法问题。

1. <p>下不能再有<p>

2. <p>下不能有<div>

浏览器会把例子自动修改为

HTML复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("#abc").children(".selected").css("color", "blue");
});
</script>
</head>
<body>
<div id="abc">
<span>Hello</span>
<p class="selected">Hello Again</p>
<p> <--------为什么</p>
<p>中的元素会变为红色？</p>
<div class="selected">And Again</div>
<span class="selected">aaAnd Again</span>
<p></p>
<div> <--------为什么
<div>中的元素不变红色？不变红色我认为是符合jquery中的说明的。因为children不同于find，它只沿着DOM树向下遍历单一层级。但是为什么上面的<p>元素中的的内容会变红色呢？
<div class="selected">1</div>
<span class="selected">2</span>
</div>
<p>And One Last Time</p>
<p class="selected">hello</p>
</div>
</body>
</html>

复制代码

lawzk · 发表于 2012-10-28 18:44:27

谢谢你的回答。不过我没明白。最上面的贴子内容：  <--------为什么<p>中的元素会变为红色？，类似这样的，在代码中是没有的。我加上去只不过让大家看的明白。实际代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
      $("#abc").children(".selected").css("color", "blue");
});
</script>
</head>
<body>

<div id="abc">
      <span>Hello</span>
      <p class="selected">Hello Again</p>
      <p>
            <div class="selected">And Again</div>
            <span class="selected">aaAnd Again</span>
      </p>
      <div>
            <div class="selected">1</div>
            <span class="selected">2</span>
      </div>

      <p>And One Last Time</p>
      <p class="selected">hello</p>
</div>

</body>
</html>

燃雲 · 发表于 2012-10-29 17:00:09

注意到先前提及的语法错误吗？

2. <p>下不能有<div>

浏览器会把新例子自动修改为

HTML复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("#abc").children(".selected").css("color", "blue");
});
</script>
</head>
<body>
<div id="abc">
<span>Hello</span>
<p class="selected">Hello Again</p>
<p></p>
<div class="selected">And Again</div>
<span class="selected">aaAnd Again</span>
<p></p>
<div>
<div class="selected">1</div>
<span class="selected">2</span>
</div>
<p>And One Last Time</p>
<p class="selected">hello</p>
</div>
</body>
</html>

复制代码

lawzk · 发表于 2012-10-29 20:50:11

晕。受教了。请问哪有这方面的资料？拜托你能否发给我看一下。

gaoomei · 发表于 2012-10-30 10:07:16

貌似楼主色盲了，你设置的是 css('color','blue');而不是red

燃雲 · 发表于 2012-10-30 17:41:09

<p>是inline元素，<div>是block元素，要在inline下有block，首先查看容不容许这样。

Google一下，找来。

http://xhtml.com/en/xhtml/reference/p/

结尾处，Contains仅可以是inline元素或Text，<div>是block元素，当然不容许放在<p>内。

<span>是inline元素，是容许在<p>内的，但<div>的存在把<p>自动关了。

若把<div>...</div>段拿走，<span>...</span>段便不会被

JS复制代码

$("#abc").children(".selected").css("color", "blue");

复制代码

选到。不会转色。

html，xhtml是麻烦东西，浏览器又各自作不同处理，一切凭经验。

方便查看的资料？我也想有一份。

lawzk · 发表于 2012-10-30 18:49:51

非常感谢你的回答。

		自动登录	找回密码
密码			入住 CI 中国社区

[HELP] 问一个jquery问题children()，是不是jquery的问题？

相关帖子