jQuery元素筛选问题

各位大虾，我是jQuery初学者，在学习过程中，遇到了一点问题希望大家能够帮忙解决下。下面是例子的代码和问题说明在此说明一下，我用得是jQuery-1.7.2 问题：当我在查找div中类为.mini的非最后一个div元素时，为什么这样写就是在div和.mini中间加一个空格才能正确排除最后一个div元素$("div .mini:not(:last)").css("background", "#baf");而如果div和.mini中间不加空格则不能排除最后一个div元素$("div.mini:not(:last)")。这两种查找方式具体有什么不同呢？请各位大虾详细说明下，谢谢给位大虾了。 <script language="javascript" type="text/javascript">  //所有div中类为.mini的非最后1个div元素
  $("#btn4").click(function(){
   //过滤器
   //$("div .mini:not(:last)").css("background", "#baf"); //问题有待解决$("div.mini:not(:last)")
  });
  
</script> <body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">点击下列按钮时先自动重置页面</label>
<br />
<br />
<h3>基本选择器.</h3>
<!-- 控制按钮 -->
<input type="button" value="所有div中类为.mini的非最后1个div元素" id="btn4"/>
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one" > id为one,class为one的div
  <div class="mini">class为mini</div>
</div>
<div class="one"  id="two" title="test" > <b>id为two,class为one,title为test的div.</b>
  <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 style="display:none;"  class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div> 包含input的type为"hidden"的div
  <input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>

解决方案 »

  1.   

    没问题。
    <!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>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
    $("#btn4").click( function() {
    $("div.mini:not(:last)").css("background-color", "#baf");
    });
    });
    </script>
    </head><body>
    <button id="reset">手动重置页面元素</button>
    <input type="checkbox" id="isreset" checked="checked"/>
    <label for="isreset">点击下列按钮时先自动重置页面</label>
    <br />
    <br />
    <h3>基本选择器.</h3>
    <!-- 控制按钮 -->
    <input type="button" value="所有div中类为.mini的非最后1个div元素" id="btn4"/>
    <br />
    <br />
    <!-- 测试的元素 -->
    <div class="one" id="one" > id为one,class为one的div
      <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test" > <b>id为two,class为one,title为test的div.</b>
      <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 style="display:none;" class="none">style的display为"none"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div> 包含input的type为"hidden"的div
      <input type="hidden" size="8"/>
    </div>
    <span id="mover">正在执行动画的span元素.</span>
    </body>
    </html>
      

  2.   

    楼主 div .mini 是表示层次关系了，意思是 div标签下的mini类
    而div.mini 是指标签为div且class为mini
    <script src="http://code.jquery.com/jquery-latest.js"></script>
     <body>
    <button id="reset">手动重置页面元素</button>
    <input type="checkbox" id="isreset" checked="checked"/>
    <label for="isreset">点击下列按钮时先自动重置页面</label>
    <br />
    <br />
    <h3>基本选择器.</h3>
    <!-- 控制按钮 -->
    <input type="button" value="所有div中类为.mini的非最后1个div元素" id="btn4"/>
    <br />
    <br />
    <!-- 测试的元素 -->
    <div class="one" id="one" > id为one,class为one的div
      <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test" > <b>id为two,class为one,title为test的div.</b>
      <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 style="display:none;" class="none">style的display为"none"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div> 包含input的type为"hidden"的div
      <input type="hidden" size="8"/>
    </div>
    <span id="mover">正在执行动画的span元素.</span>
    <script language="javascript" type="text/javascript">  //所有div中类为.mini的非最后1个div元素
      $("#btn4").click(function(){
      //过滤器
      $("div.mini:not(:last)").css("background", "#baf"); //问题有待解决$("div.mini:not(:last)")
      });
       
    </script>
    </body>
    经测试
    能获取非last的div.mini
      

  3.   

    $("div.mini") //选择所有的样式类名为mini的div元素
    $("div .mini") //有个空格的是父子选择器，选择所有包含在div元素中的类名为mini的元素
      

  4.   

    T5500请问你测试时两种写法都能获得非last的.mini的div元素，还是说$("div .mini")可以获取呢？
    因为我刚刚又测试了遍，发现还是只有$("div .mini")这种写法能获得。
    现在的问题就是我通过两种筛选方式，获得的元素集合不是一样的吗？不都是div下面类名叫mini的div元素吗？为什么用last进行筛选时，所获得的结果确实不同的呢？谢谢你了2楼的大虾也谢谢你了，我现在的问题就是这了。
      

  5.   

    实际上，在你给出的测试数据中，两种选择器能选择到同样的元素对象，为了直观说明父子选择器的作用，请考虑一下下面这个例子。
    <!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>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
        $("#btn4").click( function() {
            $("div .mini:not(:last)").css("border", "1px solid red");
    $("div.mini:not(:last)").css("background-color", "#CCC");
        });
    });
    </script>
    </head><body>
    <button id="reset">手动重置页面元素</button>
    <input type="checkbox" id="isreset" checked="checked"/>
    <label for="isreset">点击下列按钮时先自动重置页面</label>
    <br />
    <br />
    <h3>基本选择器.</h3>
    <!-- 控制按钮 -->
    <input type="button" value="所有div中类为.mini的非最后1个div元素" id="btn4"/>
    <br />
    <br />
    <!-- 测试的元素 -->
    <div class="one" id="one" > id为one,class为one的div
      <div class="mini">class为mini</div>
      <p class="mini" style="font-size:18px; font-weight:bold; color:red;">这里放置一个类名为mini的p元素，$("div.mini") 获取不到这个元素，$("div .mini")能获取这个元素</p>
    </div>
    <div class="one" id="two" title="test" > <b>id为two,class为one,title为test的div.</b>
      <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 style="display:none;" class="none">style的display为"none"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div> 包含input的type为"hidden"的div
      <input type="hidden" size="8"/>
    </div>
    <span id="mover">正在执行动画的span元素.</span>
    </body>
    </html>
      

  6.   

    测试发现$("div.mini:not(:last)").css("background-color", "#CCC");这种写法在IE6/7/8下面确实无法正确选择，看来:not选择器没有.not()方法安全，以后还是用.not()方法代替:not选择器吧：
    $("div.mini").not(":last").css("background-color", "#CCC");
      

  7.   

    确实是个bug，楼主 参考下http://www.17css.com/ie-jquery-not-bug/