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>
所有回答(5)
0
就是查询正在执行的元素和某个div元素的祖先元素
在祖先元素中找到元素是div的，且该div元素在它的父元素的div子元素列表中是排行第一的
0
$('找div'，'查找的范围')
1. 先获取第二个参数，当前元素的第一个为div的父元素，假设是 div1
2. 在 div1中 找所有的子 div元素，即结果。
0
//$函数使用选择器的时候,如果没有传第二个参数,则相对于整个dom树根的,如果传递第二个参数则是相对于,第二个参数的选择器
$('div', $(this).parents('div:first'))//第一个参数:这里的'div'是标签选择器,是找到所有的'div'标签元素,第二个参数:是相对于的意思,就是在找到'div'相对下,找到当前元素($(this)表示当前对象),对应的对象,再次进行选择,选择父类中的第一个的'div'.
希望能够帮助你理解.
<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>
@LikeNeng: 我的天啊,,没有想到发上这么乱啊,你在上面也许看不清楚,还在复制发在VS中排版一下吧.
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结合
0
$('div',$(this).parents('div:first'))
第一个参数，div 是要寻找的元素，第二个参数，是在什么范围中寻找
