Question

This is a fragment of an html doc my app has generated from a webserver log file:

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

Here is some JQuery I’ve been using to toggle the records div:

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

I’ve two problems with the way it’s functioning:

1. It only works when the id is a letter or string of letters. Numbers and dots stop the toggle working. Replace the id’s with “a” and “b” respectively and it toggles.
2. It may toggle, but then it toggles all divs with a class of “record:, even though I’ve passed in elem#id.class as the selector to toggle.

Is there a way I can keep the id as the ip-address (which is the obvious unique reference for the record) and toggle only the exact div by class and id and not all divs with that class?

Any help is much appreciated. I know several languages but it’s rare I write in javascript, and I’ve not used JQuery before.

JQuery version is 1.6.1, JQueryUI is also being loaded, version 1.8.13.

---

Some quick notes:

1. Pretty much everyone had a hand in getting me to the code I’m using now, so it’s unfortunate I can only pick one correct answer.
2. @Liangliang Zheng’s answer works, but didn’t work once I added in a “hide on load” javascript function, so @Matt Ball gets the tick for a more flexible solution.
3. I’ve started to use a custom attribute for the ip address, thanks to @Dhruva Sagar and @Liangliang Zheng for suggesting it.
4. Ip addresses elsewhere are now prefixed, thanks to @James Khoury for that suggestion.
5. I’ve no idea why anyone would get downvoted for their answers, they’re all at least partially correct.

I’ve put the solution to work in an app for reading webserver access logs and checking their geographical info via the ip, the code is up on Github if anyone’s interested https://github.com/yb66/GeoIPalise. I’ll give everyone here props with the next git push! Thanks to you all!

Answer 1

The problem is twofold:

1. As I commented on the question, you’re trying to select an element by ID when that ID contains characters which have special meaning. You need to escape those characters, or use document.getElementByID.
2. As @Dhruva points out, the DOM must not contain elements with duplicate IDs. Use a class instead, or strip out the duplicate IDs entirely. Once the DOM contains more than one element with a given ID, all bets are off, and Cthulhu will probably be summoned shortly thereafter.

All that said, you can just use .closest() and forget about element IDs entirely.

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();
    });
});

Other WTFs:

• Use this.id instead of $(this).attr('id'). (See When to use Vanilla JavaScript vs. jQuery?)
• Specifying an element type along with an ID is completely unnecessary since, as mentioned, IDs must be unique.
• .concat()? Really? What’s wrong with + (the concatenation operator)?

(No personal offense meant. It’s the code, not you.)

Demo: http://jsfiddle.net/mattball/fE9Xf/