jquery ul li选择器

Question

I have this list

<ul style="display:none">
  <li id="key1" title="Look, a tool tip!">item1 with key and tooltip
  <li id="key2" class="selected">item2: selected on init
  <li id="key3" class="folder">Folder with some children
    <ul>
      <li id="key3.1">Sub-item 3.1
      <li id="key3.2">Sub-item 3.2
    </ul>

  <li id="key4" class="expanded">Document with some children (expanded on init)
    <ul>
      <li id="key4.1">Sub-item 4.1
      <li id="key4.2">Sub-item 4.2
    </ul>
</ul>

Is there any way to select each < li > by its "id" with query?

Ive tryed it like this but its now working

$("ul li:#key1").qtip({
         content: '<img src="icons/Icon.png" />'
    });

Thanx for the answers but none of the above was working.. Ive tryed this

$("ul li:first").qtip({
 content: '<img src="icons/Icon.png" />'
});

and im able to see the qtip.But only for the first on the list (key1). Trying

$("ul li#key1").qtip({
 content: '<img src="icons/Icon.png" />'
});

or

$("#key1").qtip({
 content: '<img src="icons/Icon.png" />'
});

its not working for me.. =/

Answer 1

Just use an id selector:

$("#key1").qtip(...);

id values must be unique on the page, and so leaving all the other stuff out lets jQuery use document.getElementByID , and the selector is nice and simple (eg, fast) to parse and apply. (Of course, if you want the selector to file if key1 isn't an li , then you need the full selector. But usually that's not what you want.)

Note that some of your id values will need escaping, because you have . in them. To escape a . , you put a backslash in front of it in the selector. Because the selector is in a JavaScript string, you have to escape the backslash to actually get the backslash into the selector, so you use two:

$("#key4\\.1").qtip(...);

Answer 2

Why the extra colon : ? You dont need it.

$("ul li#key1").qtip({
     content: '<img src="icons/Icon.png" />'
});

Answer 3

Yes.

$("ul li#key1").qtip(); //rest of code

Also, since it is an ID and, most likely, unique. You can just simply use:

$("#key1")

Answer 4

If you are selecting by id, there is no need to specify the type, class or parent class. IDs should be unique.

As an example, you can use the following selector to select key1, key2 and key3 if you want to select all of them together:

$("#key1, #key2, #key3").qtip({
         content: '<img src="icons/Icon.png" />'
    });

Or to select them one by one:

$("#key1").qtip({
         content: '<img src="icons/Icon.png" />'
    });

$("#key2").qtip({
         content: '<img src="icons/Icon.png" />'
    });

Or you could do something like this to specify a list of keys and not repeat the selection and initialization of the qtip:

var keys = ['key1', 'key2', 'key3'];

$(keys).each(function(i, key) {
    $("#" + key).qtip({
         content: '<img src="icons/Icon.png" />'
    });

});