jquery如何按类再按属性选择,对jquery不是很熟


<div id="siteinfo">
<span sno="10003" onclick="sel(this)" class="site SelSite"><h1>10003</h1>站点三</span>
<span sno="10001" onclick="sel(this)" class="site"><h1>10001</h1>站点一</span>
<span sno="10002" onclick="sel(this)" class="site"><h1>10002</h1>站点二</span>
<span sno="10004" onclick="sel(this)" class="site"><h1>10004</h1>站点四</span>
<span sno="10005" onclick="sel(this)" class="site"><h1>10005</h1>站点五</span>
<span sno="10006" onclick="sel(this)" class="site"><h1>10006</h1>站点六</span>
<span sno="10007" onclick="sel(this)" class="site"><h1>10007</h1>站点七</span>
</div>
假如我要找出 sno='10005' 的span,然后再把把它移到第一位即放在<div id="siteinfo">的后面 ，用jquery应该怎样操作？

解决方案 »

  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 src="http://www.liuxiaofan.com/demo/js/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script>
    $(function(){
        $('#siteinfo span').each(function(){
    if($(this).attr('sno') == '10005'){
    alert($(this).html())
    }
    })
    });
    </script>
    </head>
    <body>
    <div id="siteinfo">
    <span sno="10003" onclick="sel(this)" class="site SelSite"><h1>10003</h1>站点三</span>
    <span sno="10001" onclick="sel(this)" class="site"><h1>10001</h1>站点一</span>
    <span sno="10002" onclick="sel(this)" class="site"><h1>10002</h1>站点二</span>
    <span sno="10004" onclick="sel(this)" class="site"><h1>10004</h1>站点四</span>
    <span sno="10005" onclick="sel(this)" class="site"><h1>10005</h1>站点五</span>
    <span sno="10006" onclick="sel(this)" class="site"><h1>10006</h1>站点六</span>
    <span sno="10007" onclick="sel(this)" class="site"><h1>10007</h1>站点七</span>
    </div>
    </body>
    </html>
      

  2.   

    这个是你需要的：<!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 src="http://www.liuxiaofan.com/demo/js/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script>
    $(function(){
        $('#siteinfo span').each(function(){
    if($(this).attr('sno') == '10005'){
    $('#siteinfo').before($(this))
    }
    })
    });
    </script>
    </head>
    <body>
    <div id="siteinfo">
    <span sno="10003" onclick="sel(this)" class="site SelSite"><h1>10003</h1>站点三</span>
    <span sno="10001" onclick="sel(this)" class="site"><h1>10001</h1>站点一</span>
    <span sno="10002" onclick="sel(this)" class="site"><h1>10002</h1>站点二</span>
    <span sno="10004" onclick="sel(this)" class="site"><h1>10004</h1>站点四</span>
    <span sno="10005" onclick="sel(this)" class="site"><h1>10005</h1>站点五</span>
    <span sno="10006" onclick="sel(this)" class="site"><h1>10006</h1>站点六</span>
    <span sno="10007" onclick="sel(this)" class="site"><h1>10007</h1>站点七</span>
    </div>
    </body>
    </html>
      

  3.   

    多谢。jquery可不可以直接按属性选择的？比如这样：$(".site [sno='10005']") 这样好像不行。
      

  4.   


    <script>
    $(function(){
        alert($("#siteinfo span[sno='10005']").html())
    });
    </script>
      

  5.   

    有个问题，你用 $('#siteinfo').before($(this))   这个是添加到<div id="siteinfo">的前面去了。我要的是在紧接它的后面。
      

  6.   

    <!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 src="http://www.liuxiaofan.com/demo/js/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script>
    $(function(){
        $("#siteinfo span[sno='10005']").insertBefore($('#siteinfo span').eq(0))
    });
    </script>
    </head>
    <body>
    <div id="siteinfo">
    <span sno="10003" onclick="sel(this)" class="site SelSite"><h1>10003</h1>站点三</span>
    <span sno="10001" onclick="sel(this)" class="site"><h1>10001</h1>站点一</span>
    <span sno="10002" onclick="sel(this)" class="site"><h1>10002</h1>站点二</span>
    <span sno="10004" onclick="sel(this)" class="site"><h1>10004</h1>站点四</span>
    <span sno="10005" onclick="sel(this)" class="site"><h1>10005</h1>站点五</span>
    <span sno="10006" onclick="sel(this)" class="site"><h1>10006</h1>站点六</span>
    <span sno="10007" onclick="sel(this)" class="site"><h1>10007</h1>站点七</span>
    </div>
    </body>
    </html>