jQuery parent().("选择器")
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3833691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery parent().("selector")
提问by el_quick
I have this HTML code:
我有这个 HTML 代码：
<tr>
<td><input type="checkbox" class="chk" /></td>
<td><div class="disabled">text to hide 1</div></td>
<td><div class="disabled">text to hide 2</div></td>
</tr>
I'm using jQuery to hide all class="disabled"items:
我正在使用 jQuery 来隐藏所有class="disabled"项目：
$("div.disabled").hide() ;
I want to show disabled divs when I click the checkbox in the same row (tr). I tried
当我单击同一行 (tr) 中的复选框时，我想显示禁用的 div。我试过
$("input.chk").click(function(){
$(this).parent().parent().(".disabled").show();
}) ;
but it doesn't work.
但它不起作用。
回答by Nick Craver
Use .closest()and .find(), like this:
使用.closest()and .find()，像这样：
$("input.chk").click(function(){
$(this).closest('tr').find(".disabled").show();
});
Your current code almostworks, you need a .find()though, like this:
您当前的代码几乎可以工作，但您需要一个.find()，如下所示：
$(this).parent().parent().find(".disabled").show();
If you have manyrows like this, use .delegate(), like this:
如果您有很多这样的行，请使用.delegate()，如下所示：
$("table").delegate("input.chk", "click", function(){
$(this).closest('tr').find(".disabled").show();
});
.delegate()instead binds one handler to the table for all of the input.chkelements to bubble up to. If you're looking to enable/disable, use changeand .toggle()in addition to the above, like this:
.delegate()而是将一个处理程序绑定到表，以便所有input.chk元素冒泡。如果您要启用/禁用，除了上述之外，还使用change和.toggle()，如下所示：
$("table").delegate("input.chk", "change", function(){
$(this).closest('tr').find(".disabled").toggle(this.checked);
});
This way if it's checked they show, if not they hide.
这样，如果选中它们，它们就会显示，否则它们会隐藏。
回答by Anji
Yes using find()and closest()is definitely the right procedure. There is a different style of writing the same. The code snippet is here.
是的，使用find()并且closest()绝对是正确的程序。有不同的写作风格。代码片段在这里。
$("input.chk").click(function() {
var th = $(this);
$(".disabled", th.parent().parent()).show();
});
回答by user113716
Almost. You're just missing the word findto indicate jQuery's .find()method.
几乎。您只是缺少find表示jQuery.find()方法的词。
$("input.chk").click(function(){
$(this).parent().parent().find(".disabled").show();
}) ;
Or, a little shorter version is to use .closest().
或者，更短的版本是使用.closest().
$("input.chk").click(function(){
$(this).closest('tr').find(".disabled").show();
});
You could also use .parents(), though you would want to indicate the :firstmatch in case you have nested tables.
你也可以使用.parents()，但你想表明的:first情况下，你有嵌套表匹配。
$("input.chk").click(function(){
$(this).parents('tr:first').find(".disabled").show();
});
回答by Eric
Its actually even easier than that.
它实际上比这更容易。
$(".disabled").hide();
$(".chk").click(function(){
if($(this).is(":checked"))
{
$(this).siblings(".disabled").show();
}
else
{
$(this).siblings(".disabled").hide();
}
});
I even added some extra functionality so that the event didn't just trigger once, but rather toggles based on whether the check box is checked or not.
我什至添加了一些额外的功能，以便事件不会只触发一次，而是根据是否选中复选框进行切换。
回答by nubbel
And it's even easier:
而且更简单：
$(".disabled").hide();
$(".chk").click(function() {
$(this).siblings(".disabled").toggle();
});?
:-)
:-)
回答by nubbel
Now it works: http://jsfiddle.net/WAQBj/2/
现在它可以工作了：http: //jsfiddle.net/WAQBj/2/
$(".disabled").hide();
$(".chk").click(function() {
$(this).closest('tr').find(".disabled").toggle();
});?
