Question

我试图找出如何隐藏另一个中的特定元素。例如：

  <form  name='demo_form'>
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
  </select>
  <input id="submit1" type="submit" value="Submit">
  </form>

所以说我想隐藏Select标签，剩下的就剩下了。

我知道如果我做了

$(demo_form.elements).hide();

会隐藏整个内容，只留下First Last名称文字，但对我来说真的没用。

我试过

$(demo_form.select).hide();
$("demo_form > select").hide();

但我从中得不到任何东西。

我知道我能做到

$("form > select").hide();
$("#submit1").click(function() {
         event.preventDefault();
         $("form > select").show();
})

（这个节目是我正在玩弄的东西，想想也许我希望在用户提交后显示额外的信息）

我知道我能做的唯一问题是它会抓住所有表格和所有选择，我希望能够抓住一个特定的表格并抓住它的相应选择，或任何我想要的标签，而不必总是给那些子标签一个id。

任何建议都会很棒！感谢。

Answer 1

如果您希望根据name属性进行选择，这对您有用：

$("form[name='demo_form'] > select").hide();

这将仅隐藏select的{{1}}个直接子元素，其form属性为＆＃34; demo_form＆＃34;。

Answer 2

我认为你所寻找的只是：

$('select[name=cars]').hide();

就个人而言，我喜欢为我的输入提供相同值的name和id：

<select id="cars" name="cars"> ... </select>

id属性用于通过jQuery更快地检索，因此，而不是上述内容，它将是：

$('#cars').hide();`

name属性用于在提交表单时发送数据。（但是，有一些方法可以在不使用name属性的情况下发送数据。）

Answer 3

您可以使用jQuery的选择器context将选择器限制为特定元素。例如，要隐藏表单中的所有select元素：

$('select', 'form[name="demo_form"]').hide();

将元素作为第二个参数传递给$()会将搜索选择器限制为元素。以上内容将影响select元素中的所有form[name='demo_form']标记。

如何使用JQuery隐藏特定的子标记

3 个答案: