0

I am trying to click one of my LI thumbnails. The HTML code for this is:

<ul id="thumbImgs" class="list" style="height: 250px;">
   <li id="04_BOARDWALK_VIEW.jpg" data-wh="1000|700|testing 3" class="item">
      <img src="cms/img/uploaded/04_BOARDWALK_VIEW_tmb.jpg" width="120" height="120" class="imgStyle" style="opacity: 0.5;">
   </li>
   etc etc....
</ul>

I've already tried:

$('#04_BOARDWALK_VIEW.jpg').click();

$("#thumbImgs li #04_BOARDWALK_VIEW.jpg").click();

$("#thumbImgs li 04_BOARDWALK_VIEW.jpg").click();

But that does not seem to work. What would i be missing?

StealthRT
  • 10,108
  • 40
  • 183
  • 342
  • 2
    Do you want to trigger a click on the image, or the `li`? Your question title says 'li img' but you appear to be trying to select the ID of the `li`. – Blazemonger Jan 14 '13 at 20:56
  • Please refer to this question: http://stackoverflow.com/questions/605630/how-to-select-html-nodes-by-id-with-jquery-when-the-id-contains-a-dot – pgpb.padilla Jan 14 '13 at 21:04

2 Answers2

7

. is a special character and therefore needs to be escaped.

$('#04_BOARDWALK_VIEW\\.jpg')

Though I also wonder how you were able to add a click handler to the image without doing this.

Your original selector #04_BOARDWALK_VIEW.jpg would get you an element with an id of #04_BOARDWALK_VIEW and a class of jpg.

James Montagne
  • 77,516
  • 14
  • 110
  • 130
7

The problem you have is the period in your id. That is generally poor practice, but can be overcome in jQuery if you escape the period in the selector. Do it like this:

$("#04_BOARDWALK_VIEW\\.jpg").click();

Note the need for double backslash as \ is an escapes charater in javascript, so you need one backslash to actually escape the real backslash which is needed by jQuery to escape the period. Again, best practice would have you not using the periods in the id's at all.

Mike Brant
  • 70,514
  • 10
  • 99
  • 103