隐藏与其关联的文本框字段和标签

时间:2011-07-29 16:26:04

标签: jquery html

这可能是一个毫无意义的问题,但我认为这对我们很多人都有用。

在这种情况下,我希望能够一次性隐藏文本框及其标签,而无需同时选择这两个元素并将其隐藏起来。

<label for="a">some text:</label>
<input type="text" class="text" id="a" />

因此,对于上述情况,是否可以使用简单的jQuery命令将它们隐藏在一起?

4 个答案:

答案 0 :(得分:20)

你可以这样做

$('label[for=a], input#a').hide();

http://jsfiddle.net/jasongennaro/dYFMU/

[ ]选择attribute。在这种情况下,我们定位的for属性等于a

与此同时,我们使用,进行其他选择,input使用id=a

修改

此外,如果您需要为多个labelsinputs执行此操作,则可以将labelid放入数组中,如下所示:

<label for="a">some text:</label>
<input type="text" class="text" id="a" />

<br />

<label for="b">some text:</label>
<input type="text" class="text" id="b" />

<br />

<label for="c">some text:</label>
<input type="text" class="text" id="c" />

JS

var a = ['a','b','c'];

for(var i=0; i<a.length; i++){
    $('label[for=' + a[i] + '], input#' + a[i]).hide();
}

http://jsfiddle.net/jasongennaro/dYFMU/1/

答案 1 :(得分:2)

如果要重用隐藏,可以创建类似于以下的函数:

function hideTandem(id){
    $('#' + id + ', label[for=' + id + ']').hide();
}

并通过提供输入的id

来调用它
hideTandem('a');

答案 2 :(得分:1)

最简单的方法可能是将它们包裹在div中并隐藏它。

<div id="hidethis">
  <label for="a">some text:</label>
  <input type="text" class="text" id="a" />
<div>

$("#hidethis).hide();

答案 3 :(得分:1)

根据需要找到输入,然后您可以使用

找到其ID
var myInputBoxID = $(some selector).attr("id");

然后,您可以使用以下语法来引用标签,以捕获属性的标签:

$("label[for=' + myInputBoxID + ']").hide();

您可以很好地嵌套,这样您就不需要将任何内容存储为变量,而是在输入框选择器的所有结果上运行“for each”。但无论如何,关键是找到ID然后用它来找到带有标签[for = ...]

的标签