javascript - 设置在没有父子节点的其他选择器上可见

Question

我可以使用 children() 和 parent() 但如果输入不是孩子和父母怎么办？

<table>
<tr>
<td>
    <input type="checkbox" class="check">
    <select style="display: none"><option>1</option><option>2</option></select>
    <select style="display: none"><option>1</option><option>2</option></select>
    <input type="text" style="display: none">
</td>
    </tr><tr>
    <td>
    <input type="checkbox" class="check">
    <select style="display: none"><option>1</option><option>2</option></select>
    <select style="display: none"><option>1</option><option>2</option></select>
    <input type="text" style="display: none">
</td></tr><tr>
    <td>
    <input type="checkbox" class="check">
    <select style="display: none"><option>1</option><option>2</option></select>
    <select style="display: none"><option>1</option><option>2</option></select>
    <input type="text" style="display: none">
</td></tr><tr>
    <td>
    <input type="checkbox" class="check">
    <select style="display: none"><option>1</option><option>2</option></select>
    <select style="display: none"><option>1</option><option>2</option></select>
    <input type="text" style="display: none">
</td>
</tr>
</table>

如果我用类检查选中复选框，那么 2 选择和输入应该是可见的。我怎样才能用 jQuery 制作？

小提琴：http : //jsfiddle.net/ykyNq/1/

Answer 1

根据您的情况，您可以使用几个不同的选择器来查找兄弟姐妹。在这种情况下，您可以使用siblings()

$('.check').click(function(){    
    $(this).siblings("select, input").toggle() 
})

http://jsfiddle.net/ykyNq/3/

Answer 2

您可以使用兄弟姐妹来选择它的所有兄弟姐妹（同一父级下同一级别的元素）

$('.check').click(function(){
    $(this).siblings().toggle();
})​

http://jsfiddle.net/ykyNq/4/