首页 新闻 搜索 专区 学院

Jquery选择器问题

0
悬赏园豆:10 [待解决问题]

$('div',$(this).parents('div:first'))  表示什么意思

问题补充:

感谢各位的回答,但还是不怎么理解!我贴个代码,大家帮我分析下


<html>
<head>
<title>Bamboo Asian Grille - Online Order Form</title>
<link rel="stylesheet" type="text/css" href="bamboo.css">
<script type="text/javascript" src="../../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript">
    $(function(){
      $('fieldset div div').hide();
      $(':checkbox').click(function(){
      var checked = this.checked;
      $('div',$(this).parents('div')) //问题在这里
        .css('display',checked ? 'block':'none');
      $('input[type=text]',$(this).parents('div:first'))
       .attr('disabled',!checked)
       .css('color',checked ? 'red' : '#f0f0f0')
       .val(1)
       .change()
    .each(function(){ if (checked) this.focus(); });
    });
    $('span[price] input[type=text]').change(function(){
    $('~ span:first',this).text(
      $(this).val() *
      $(this).parents("span[price]:first").attr('price')
     );
    });
    $('span[price] input[type=text]').change();
    });
</script>
</head>

<body>
<h1>Bamboo Asian Grille</h1>
<h2>Online Order Menu</h2>
<fieldset>
<legend>Appetizers</legend>

<div id="outer1">
<label>
<input type="checkbox" name="appetizers" value="imperial"/>
Fried Imperial rolls (2)
</label>

<span price="3">
<input type="text" name="imperial.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>

<div id="inner1">
<label>
<input type="radio" name="imperial.option"
value="pork" checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="imperial.option"
value="vegetarian"/>
Vegetarian
</label>
</div>
</div>

<div id="outer2">
<label>
<input type="checkbox" name="appetizers" value="spring"/>
Spring rolls (2)
</label>
<span price="4">
<input type="text" name="spring.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div id="inner2">
<label>
<input type="radio" name="spring.option" value="pork"
checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="spring.option"
value="shrimp"/>
Pork and Shrimp
</label>
<label>
<input type="radio" name="spring.option"
value="vegetarian"/>
Vegetarian
</label>
</div>
</div>

<div id="outer3">
<label>
<input type="checkbox" name="appetizers" value="vnrolls"/>
Vietnamese rolls (4)
</label>
<span price="5">
<input type="text" name="vnrolls.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div id="inner3">
<label>
<input type="radio" name="vnrolls.option" value="pork"
checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="vnrolls.option"
value="shrimp"/>
Pork and Shrimp
</label>
<input type="radio" name="vnrolls.option"
value="vegetarian"/>
<label>Vegetarian</label>
</div>
</div>

<div id="outer4">
<label>
<input type="checkbox" name="appetizers" value="rangoon"/>
Crab rangoon (8)
</label>
<span price="6">
<input type="text" name="rangoon.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div id="inner4">
<label>
<input type="radio" name="rangoon.option"
value="sweet checked="checked"/>
Sweet-and-sour sauce
</label>
<label>
<input type="radio" name="rangoon.option" value="hot"/>
Hot mustard
</label>
<label>
<input type="radio" name="rangoon.option" value="both"/>
Both
</label>
</div>
</div>

<div id="outer5">
<label>
<input type="checkbox" name="appetizers"
value="stickers"/>
Pot stickers (6)
</label>
<span price="5">
<input type="text" name="stickers.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div id="inner5">
<label>
<input type="radio" name="stickers.option"
value="pork" checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="stickers.option"
value="vegetarian"/>
Vegetarian
</label>
</div>
</div>

</fieldset>
</body>
</html>

Paul_bai的主页 Paul_bai | 初学一级 | 园豆:12
提问于:2013-01-25 17:17
< >
分享
所有回答(5)
0

就是查询正在执行的元素和某个div元素的祖先元素

在祖先元素中找到元素是div的,且该div元素在它的父元素的div子元素列表中是排行第一的

hongdada | 园豆:216 (菜鸟二级) | 2013-01-25 17:35
0

$('找div','查找的范围')

1. 先获取第二个参数,当前元素的第一个为div的父元素,假设是 div1

2. 在 div1中 找所有的子 div元素,即结果。

Qlin | 园豆:2403 (老鸟四级) | 2013-01-25 18:02
0

               //$函数使用选择器的时候,如果没有传第二个参数,则相对于整个dom树根的,如果传递第二个参数则是相对于,第二个参数的选择器
                $('div', $(this).parents('div:first'))//第一个参数:这里的'div'是标签选择器,是找到所有的'div'标签元素,第二个参数:是相对于的意思,就是在找到'div'相对下,找到当前元素($(this)表示当前对象),对应的对象,再次进行选择,选择父类中的第一个的'div'.

               希望能够帮助你理解.

KenyonLi | 园豆:165 (初学一级) | 2013-01-26 00:31

 <script type="text/javascript">   

 $(function () {         

// 找到标签fieldset 下的 div 的 div并且隐藏      

 $('fieldset div div').hide();       

 //这里是找到所有的chechbox元素,当触发click时,要发生的事件.(好像是表单选择器)         

$(':checkbox').click(function () {            

 //这里是用的是Dom的this,表示当前对象.点击checked的事件.       

var checked = this.checked;            

 /*既然问题在这里,我就说详细些:             

解释:$('第一个参数',第二个参数) -> $函数使用选择器的时候,如果没有传第二个参数,则相对于整个dom树根的,如果传递第二个参数则是相对于,第二个参数的选择器              其实这里特效就是显示被点击的checked,没有被点击打钩的就隐藏.这里我看了一下代码,也做了一下小小调试.里面有两个"div";一个div的Id是outer1,还有一个是inner1,当我:$('div', $(this).parents('#inner1')),那种特效就消失了.当我:$('div', $(this).parents('#outer1'))的时候,就只有一个有,其他的都没有.我还了其他的'div'的id,我发现了只"outer1..2...3"有这种特效.其实带有这种标记的"Div"就是父类.之前的我调试是第二个参数,第一个参数,当我变成: $('label', $(this).parents('div'))的时候,那种特效也就没有了.当我:$('#inner3', $(this).parents('div'))和刚才上面那种一样,只有被我修改的这个"div"才有"点击显示",其他没有修改的,就没有.我发现这两个的"div",给人的迷惑.只我们搞清楚这个两"Div",谁表示谁...问题就迎刃而解了..接下来我们就一起分析一下吧:         

     当我们点击checkbox时,我们要找到当前被点击checkbox所在的位置,我们就要用到选择器找到它,被点击的位置.        

     $('div', $(this).parents('div'))//第一个参数,是标签选择器表示所有的"div"含有( id=inner1..inner5这类的div,为什么呢?因为有第二个参数),第二个参数,之前我也解释过,也许说得不够官方,但意思差不多."它相对于的意思".这里是重点:有点难以理解(第二个参数的意思,我只有打一个比方了.例子举得不太好,还请见谅:比如:第一个参数是:小强,假如有一天,有人要想找小强的父亲,但是那人不认识他的父亲.那个人就想找小强的父亲,怎么办?就只有借助小强,来找到他的父亲.第二个参数就是这个意思?它就是相对于谁的意思?如果这里理解了,就好办了.).那么这个$('div', $(this).parents('div'))就简单了.就是第二个参数相对于第一个参数的"div",来过滤选择.第二个参数相对于第一个参数的"div"找,在这个基础上,再次进行选择过滤.就是当前被点击的对象,找到相对于第一个参数的"div"的父类.(这里的父类函数.parents("div")也可以用选择器,里面用是的是标签选择器.)这是我理解,希望能够再次帮助你,谢谢!           

  */            

  //这句代码的作用就是显示和隐藏(div的Id=outer1..outer5这一类)被点击的checkbox.              $('div', $(this).parents('div')).css('display', checked ? 'block' : 'none'); //checked ? 'block' : 'none'这里好像是 ? : 三元运算符吧?   

          $('input[type=text]', $(this).parents('div:first')).attr('disabled', !checked).css('color', checked ? 'red' : '#f0f0f0').val(1).change().each(function () { if (checked) this.focus(); });     

     });        

  $('span[price] input[type=text]').change(function () {    

          $('~ span:first', this).text(       $(this).val() *       $(this).parents("span[price]:first").attr('price')  

            );

     });         

        $('span[price] input[type=text]').change();      });

 </script>  </head>

<body>    

<h1>    Bamboo Asian Grille</h1>  

   <h2>  Online Order Menu</h2>   

  <fieldset> <legend>Appetizers</legend>  

       <div id="outer1">     

        <label>            

              <input type="checkbox" name="appetizers" value="imperial" />               

           Fried Imperial rolls (2)         

      </label>            

    <span price="3">         

        <input type="text" name="imperial.quantity" disabled="disabled" value="1" />           

      $<span></span> </span>        

        <div id="inner1">       

      <label>         

          <input type="radio" name="imperial.option" value="pork" checked="checked" />              

       Pork          

       </label>         

        <label>         

            <input type="radio" name="imperial.option" value="vegetarian" />                     Vegetarian         

        </label>         

    </div>       

  </div>      

   <div id="outer2">    

       <label>           

      <input type="checkbox" name="appetizers" value="spring" />                 Spring rolls (2)     

        </label>        

     <span price="4">         

        <input type="text" name="spring.quantity" disabled="disabled" value="1" />               

  $<span></span> </span>     

        <div id="inner2">         

        <label>                 

    <input type="radio" name="spring.option" value="pork" checked="checked" />               

      Pork            

     </label>     

            <label>        

             <input type="radio" name="spring.option" value="shrimp" />                     Pork and Shrimp      

           </label>        

         <label>           

          <input type="radio" name="spring.option" value="vegetarian" />                     Vegetarian          

       </label>       

      </div>     

    </div>      

   <div id="outer3">     

        <label>           

      <input type="checkbox" name="appetizers" value="vnrolls" />                 Vietnamese rolls (4)   

          </label>       

      <span price="5">        

         <input type="text" name="vnrolls.quantity" disabled="disabled" value="1" />       

          $<span></span> </span>  

           <div id="inner3">    

             <label>           

          <input type="radio" name="vnrolls.option" value="pork" checked="checked" />       

              Pork        

         </label>      

           <label>             

        <input type="radio" name="vnrolls.option" value="shrimp" />                     Pork and Shrimp          

       </label>         

        <input type="radio" name="vnrolls.option" value="vegetarian" />                 <label>           

          Vegetarian</label>     

        </div>    

     </div>     

    <div id="outer4">   

          <label>             

    <input type="checkbox" name="appetizers" value="rangoon" />                 Crab rangoon (8)       

      </label>          

   <span price="6">      

           <input type="text" name="rangoon.quantity" disabled="disabled" value="1" />          

       $<span></span> </span>      

       <div id="inner4">       

          <label>           

          <input type="radio" name="rangoon.option" value="sweet" checked="checked" />         

            Sweet-and-sour sauce     

            </label>         

        <label>             

        <input type="radio" name="rangoon.option" value="hot" />                     Hot mustard          

       </label>        

         <label>          

           <input type="radio" name="rangoon.option" value="both" />                     Both             

    </label>    

         </div>   

      </div>        

<div id="outer5">       

      <label>             

    <input type="checkbox" name="appetizers" value="stickers" />                 Pot stickers (6)       

      </label>     

        <span price="5">     

            <input type="text" name="stickers.quantity" disabled="disabled" value="1" />         

        $<span>

</span> </span>         

    <div id="inner5">     

            <label>           

          <input type="radio" name="stickers.option" value="pork" checked="checked" />        

             Pork        

         </label>       

          <label>             

        <input type="radio" name="stickers.option" value="vegetarian" />                     Vegetarian    

             </label>       

      </div>

        </div>  

   </fieldset>

</body>

</html>

支持(0) 反对(0) KenyonLi | 园豆:165 (初学一级) | 2013-01-28 17:06

@LikeNeng: 我的天啊,,没有想到发上这么乱啊,你在上面也许看不清楚,还在复制发在VS中排版一下吧.

支持(0) 反对(0) KenyonLi | 园豆:165 (初学一级) | 2013-01-28 17:10
0

$('div',$(this).parents('div:first')) 表示什么意思

$(this) //去当前操作对象比如 :<a id ="a1" href="#" onclick= "get(this);"a> <a/> this 就同等于 $("#a1");

parents 是获取父级对象,比如 :<div id="div1"><a id ="a1" href="#" onclick= "get(this.parents);"a> <a/></div>

              this.parents("div:first") 就是获取父级的第一个div 也就div1.

那么$('div',$(this).parents('div:first')) 说白了就是:不管页面多杀个IDV他找到的是第一个div的所以子级DIV结合

Loui | 园豆:228 (菜鸟二级) | 2013-01-26 00:52
0

$('div',$(this).parents('div:first'))

 

第一个参数,div 是要寻找的元素,第二个参数,是在什么范围中寻找

chenping2008 | 园豆:9836 (大侠五级) | 2013-01-26 14:18
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册