Question

为什么我的函数只隐藏一个id元素。我认为它应该用id #foo隐藏一切。 Fiddle

$(function(){
    $('#foo').hide();
});

这是我的HTML

<div id='foo'>Hi there</div>
<div id='foo'>Hi there</div>
<div id='foo'>Hi there</div>
<div id='foo'>Hi there</div>
<div id='foo'>Hi there</div>

Answer 1

id在html中应该是唯一的。 jquery选择器只使用id选择单个元素尝试添加类属性，如下面的

<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>

和jquery

$(function(){
    $('.foo').hide();
});

Answer 2

这样就可以了。

最佳实践：由于ID必须是唯一的，因此请将ID替换为类。

$(function(){
      $(".foo").hide();
});

无论如何：我不建议使用相同的ID

如果您无法更改ID，则以下代码将执行此操作

 $("[id^=foo]").hide();

<强> DEMO

Answer 3

将您的HTML更改为：

<div id='foo1'>Hi there</div>
<div id='foo2'>Hi there</div>
<div id='foo3'>Hi there</div>
<div id='foo4'>Hi there</div>
<div id='foo5'>Hi there</div>

并像这样使用jquery：

$(function(){
  $('[id^=foo]').hide();
});

Ids必须是独一无二的。你可以使用一个类来调用它：$('.class').hide()

或者只使用课程：

<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>

和jQuery：

$(function(){
  $('.foo').hide();
});

Answer 4

因为它认为ID的第一个元素是'foo'并且在整个网页中必须是唯一的，所以在这种情况下你可以使用class。

<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>

$(function(){
    $('.foo').hide();
});

Answer 5

ID是唯一标识符，因此您必须使用类选择器。

检查 demo js Fiddle

的jQuery

$(function(){
    $('.foo').hide();
});

Answer 6

使用

 $(function(){
    $('div#foo').hide();
});

http://plnkr.co/edit/?p=preview

我同意其他人在这种情况下应该使用课程。

Answer 7

您应该使用类名。

<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>


$(function(){
    $('.foo').hide();
});

Answer 8

HTML只允许您为每个元素使用唯一的ID。而不是将其声明为类。

在声明所有课程后尝试此操作。

 $('.foo').hide()

Answer 9

ID应该是唯一的。您的HTML不正确。如果您在文档中多次使用相同的ID，则会得到意外的结果。

因为ID应该是唯一的，所以jQuery只抓取集合的第一个元素。

将您的HTML更改为，

<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>

然后使用，

$(function(){
  $('foo').hide();
});

jQuery选择器的一些问题

9 个答案:

的jQuery