JQuery赢得'；如果id是一个数字，则不能切换

这是我的应用程序从Web服务器日志文件生成的html文档的一个片段：

<div class='ip' id='220.181.108.95'>
  <h3>220.181.108.95</h3>
  <h4 class='records' id='220.181.108.95'>
    Records:
  </h4>
  <div class='records' id='220.181.108.95'>
    <div class='record' id='220.181.108.95'>
      <p>ip: 220.181.108.95 timestamp: 15/Jun/2011:21:21:14 +0100 access_request_type: GET page: / status_code: 200 </p>
    </div>

    <div class='record' id='220.181.108.95'>
      <p>ip: 220.181.108.95 timestamp: 13/Jun/2011:08:18:09 +0100 access_request_type: GET page: / status_code: 200 </p>
    </div>

    <div class='record' id='220.181.108.95'>
      <p>ip: 220.181.108.95 timestamp: 12/Jun/2011:13:23:11 +0100 access_request_type: GET page: / status_code: 200 </p>
    </div>
  </div>
</div>

<div class='ip' id='123.125.71.60'>
  <h3>123.125.71.60</h3>
  <h4 class='records' id='123.125.71.60'>
    Records:
  </h4>
  <div class='records' id='123.125.71.60'>
    <div class='record' id='123.125.71.60'>
      <p>ip: 123.125.71.60 timestamp: 11/Jun/2011:04:19:31 +0100 access_request_type: GET page: /stylesheet.css status_code: 200 </p>
    </div>  
  </div>
</div>

220.181.108.95
记录：
ip:220.181.108.95时间戳：2011年6月15日：21:21:14+0100访问请求类型：获取页面：/status\u代码：200

ip:220.181.108.95时间戳：13/Jun/2011:08:18:09+0100访问请求类型：获取页面：/status\u代码：200

ip:220.181.108.95时间戳：12/Jun/2011:13:23:11+0100访问请求类型：获取页面：/status\u代码：200

123.125.71.60
记录：
ip:123.125.71.60时间戳：11/Jun/2011:04:19:31+0100访问请求类型：获取页面：/stylesheet.css状态代码：200

下面是我用来切换records div的一些JQuery：

<script>
      $(document).ready(function(){
            $("h4.records").click(function(){
                  var id = $(this).attr("id");
                  $("div#".concat(id, ".records")).toggle();
            });
      });
</script>

$（文档）.ready（函数（）{
$（“h4.records”）。单击（函数（）{
var id=$（this.attr（“id”）；
$（“div#“.concat（id，.records”））.toggle（）；
});
});

我对它的运作方式有两个问题：

它仅在id为字母或字母串时起作用。数字和点停止切换工作。将id分别替换为“a”和“b”，然后切换

它可能会切换，但随后它会使用“record:”类切换所有div，即使我已将elem#id.class作为切换选择器传入

是否有一种方法可以将id保留为ip地址（这显然是记录的唯一引用），并仅按类和id切换确切的div，而不是按该类切换所有div

非常感谢您的帮助。我知道几种语言，但很少用javascript编写，而且我以前从未使用过JQuery

JQuery的版本是1.6.1，也正在加载JQueryUI，版本是1.8.13

---

一些简要说明：

几乎每个人都参与了我现在使用的代码，所以很不幸，我只能选择一个正确的答案

@梁亮郑的答案是可行的，但在我添加了一个“加载时隐藏”javascript函数后就不起作用了，因此@Matt Ball获得了一个更灵活的解决方案

由于@Dhruva Sagar和@Liangliang Zheng的建议，我已经开始为ip地址使用自定义属性

由于@James Khoury的建议，其他地方的Ip地址现在都加了前缀

我不知道为什么有人会对他们的答案投反对票，他们至少都部分正确

我已经将解决方案放在一个应用程序中，用于读取Web服务器访问日志并通过ip检查他们的地理信息，如果有人感兴趣，代码在Github上。我将在下一次git推送中为这里的每个人提供道具！谢谢大家！

Id必须以字母开头。来自w3c：

ID和名称标记必须以字母（[a-Za-z]）开头，后面可以是任意数量的字母、数字（[0-9]）、连字符（“-”）、下划线（“）、冒号（：”）和句点（“.”）

我建议您在id的开头添加“ip”（例如

id='ip220.181.108.95'

）

编辑其他人注意到您有多个id，我建议您使用id命名第一个id，子记录可以通过

jQuery("div#id .records").toggle();

这将切换具有指定id的

div中的所有元素。

Id必须以字母开头。来自w3c：

ID和名称标记必须以字母（[a-Za-z]）开头，后面可以是任意数量的字母、数字（[0-9]）、连字符（“-”）、下划线（“）、冒号（：”）和句点（“.”）

我建议您在id的开头添加“ip”（例如
id='ip220.181.108.95'
）

编辑其他人注意到您有多个id，我建议您使用id命名第一个id，子记录可以通过

jQuery("div#id .records").toggle();

这将使用指定的id切换
div
中的所有元素。
在HTML中，多个节点不能具有相同的“id”。这就是这里的问题。您应该使用一些其他属性，而不是id，可能是数据id，然后它应该工作。
在HTML中，多个节点不能具有相同的“id”。这就是这里的问题。取而代之对于id，您应该使用一些其他属性，可能是一个数据id，然后应该可以使用。
问题是，当您尝试选择
$（'#220.181.108.95'）
时，jQuery查询DOM的目的是：

id为220且类别为181、108和95的元素

例如，

要解决此问题，您需要在选择器中转义句点。为此，您需要添加一个
\\
，如下所示：

因此，您的选择器需要是
$（'#220\\.181\\.108\\.95'）

您可以通过使用

id.replace（'.'，'\.'）；


请参见编辑…

此外，id应该是唯一的

编辑：

正如Matt Bell链接到的，有一种更好、更受欢迎的方法可以做到这一点（我不知道）

将使用：

$（jq（'220.181.108.95'））

问题是，当您尝试选择
$（'#220.181.108.95'）
时，jQuery查询DOM的目的是：

id为220且类别为181、108和95的元素

例如，

要解决此问题，您需要在选择器中转义句点。为此，您需要添加一个
\\
，如下所示：

因此，您的选择器需要是
$（'#220\\.181\\.108\\.95'）

您可以通过使用

id.replace（'.'，'\.'）；


请参见编辑…

此外，id应该是唯一的

编辑：

正如Matt Bell链接到的，有一种更好、更受欢迎的方法可以做到这一点（我不知道）

将使用：

$（jq（'220.181.108.95'））

问题有两方面：

正如我在这个问题上所评论的那样，您试图通过ID选择一个元素，而该ID为
<div class='ip' id='220.181.108.95'>
  <h3>220.181.108.95</h3>
  <h4 class='records'>
    Records:
  </h4>
  <div class='records'>
    <div class='record'>
      <p>ip: 220.181.108.95 timestamp: 15/Jun/2011:21:21:14 +0100 access_request_type: GET page: / status_code: 200 </p>
    </div>

    <div class='record'>
      <p>ip: 220.181.108.95 timestamp: 13/Jun/2011:08:18:09 +0100 access_request_type: GET page: / status_code: 200 </p>
    </div>

    <div class='record'>
      <p>ip: 220.181.108.95 timestamp: 12/Jun/2011:13:23:11 +0100 access_request_type: GET page: / status_code: 200 </p>
    </div>
  </div>
</div>

<div class='ip' id='123.125.71.60'>
  <h3>123.125.71.60</h3>
  <h4 class='records'>
    Records:
  </h4>
  <div class='records'>
    <div class='record'>
      <p>ip: 123.125.71.60 timestamp: 11/Jun/2011:04:19:31 +0100 access_request_type: GET page: /stylesheet.css status_code: 200 </p>
    </div>  
  </div>
</div>

$(function(){
    $("h4.records").live('click', function(){
        $(this).closest('div.ip').find('div.records').toggle();
    });
});

<div class='record' ip='1.2.3.4'><p></p></div>

$('div.record[ip="' + target_ip + '"]').toggle();