jquery中为什么这个的结果会不同？


<!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" />
<title>无标题文档</title>
<style type="text/css">
div, span, p{width:140px; height:140px; margin:5px; background:#aaa; border:1px solid #000; float:left; font-size:17px; font-family:Verdana, Geneva, sans-serif}

div.mini{width:55px; height:55px; background:#aaa; font-size:12px}
/*div.hide{display:block}*/
</style><script type="text/javascript" src="jquery_included/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$('.one:only-child')/*.show(1000)*/.css('background', '#bbffaa');
});
</script>
</head><body>
<div class="one" id="one">
     id为one, class为one的div
     <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
     id为two, class为one, title为test的div.
        <div class="mini" title="other">class为mini, title为other</div>
        <div class="mini" title="test">class为mini, title为test</div>
    </div>
    <div class="one">
     <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
     <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini" title="tesst">class为mini, title为tesst</div>
    </div>
    <div class="one">style的display为"none"的div</div>
    <div class="saf">class为"hide"的div</div>
    <div class="one" style="display:none">
     包含input的type为"hidden"的div<input type="hidden" size="8" />
    </div>
    <span id="mover">正在执行动画的span元素.</span>
</body>
</html>这里不改变背景色。但$('.one:only-child')改成$('div:only-child')就会改变。如果改成$('div.one:only-child')同样不改变背景色。为什么呢？jqueryclassdivxhtmlhtml

解决方案 »

  1.   

    这是选择器的本身的特性规定的，本身只匹配唯一子元素。:only-child
    如果某个元素是父元素中唯一的子元素，那将会被匹配。
    如果父元素中含有其他元素，那将不会被匹配。
    如果非要：$('.one:only-child')这个匹配.one下面只有一个.one的元素。<div class="zero">
        <div class="one">
            <div class="one">one1</div>
        </div>
        <div class="one">one2</div>
        <div class="one">
            <div class="one">one3</div>
            <div class="one">one4</div>
        </div>
    </div>只会匹配one1，
    不会匹配one2，因为one2没有子元素，
    不会匹配one3，因为one3有多个子元素。
      

  2.   

    您的意思是不是.one的话就子元素必须拥有与父元素一样的class名才可以匹配？
      

  3.   

    如果某个元素是父元素中唯一的子元素，那将会被匹配
    其实他本身还有一个父元素，只是如果没有父元素，会在整个页面内寻找。
    比如：$("ul li:only-child");
    $("#parent .one:only-child");ul是父级元素。<div id="parent">
        <div class="one"><div class="one"></div></div>
        <div class="one"></div>
    </div>