如果id是一个数字，JQuery将不会切换

Question

这是我的应用程序从webserver日志文件生成的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>

下面是一些我一直用来切换记录div的JQuery：

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

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

1. 只有当id是字母或字符串时，它才能工作。数字和圆点使开关停止工作。将id替换为"a“和"b”，然后切换。
2. 它可能会切换，但是它会用"record：“类切换所有div，尽管我在elem#id.class中传递了一个切换选择器。

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

任何帮助都是非常感谢的。我知道几种语言，但很少用javascript编写，而且我以前也没有使用过JQuery。

JQuery版本为1.6.1，JQueryUI也正在加载，版本为1.8.13。

一些简短的注释：

1. 几乎每个人都帮助我找到了我现在使用的代码，所以不幸的是，我只能选择一个正确的答案。
2. @Liangliang郑的答案有效，但一旦我添加了一个“隐藏加载”javascript函数，它就不起作用了，所以@Matt Ball得到了一个更灵活的解决方案。
3. 我已经开始为ip地址使用一个自定义属性，这要感谢@Dhruva Sagar和@Liangliang郑提出的建议。
4. 其他地方的Ip地址现在是前缀，这要感谢@James的建议。
5. 我不知道为什么有人会因为他们的答案而被否决，他们至少都是部分正确的。

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

Answer 1

问题有两个：

1. 正如我在这个问题上评论的那样，当ID包含具有特殊意义的字符时，您将尝试按ID选择一个元素。您需要转义那些字符，或者使用document.getElementByID。
2. 作为@Dhruva指出，DOM不能包含具有重复ID的元素。。而是使用class，或者完全删除重复的ID。一旦DOM包含了多个具有给定ID的元素，所有投注都会取消，此后不久就可能会调用Cthulhu。

尽管如此，您只需使用 .closest() 就可以完全忘记元素ID。

HTML

<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>

JavaScript

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

其他世贸组织：

• 使用this.id而不是$(this).attr('id')。(见什么时候使用香草JavaScript和jQuery？)
• 指定元素类型和ID是完全不必要的，因为正如前面提到的，ID必须是唯一的。
• .concat()？真的？(级联操作符)怎么了？

(没有个人冒犯的意思。这是密码，不是你。)

演示：http://jsfiddle.net/mattball/fE9Xf/

Answer 2

在HTML中，多个节点不能具有相同的“id”。这就是问题所在。而不是id，您应该使用一些其他属性，也许是一个数据id，然后它就可以工作了。

Answer 3

我建议您使用自定义属性而不是id。

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

因此，在js中，您可以：

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