jquery ul li 选择器答案

【问题标题】：jquery ul li selectorjquery ul li 选择器
【发布时间】：2012-04-23 19:19:16
【问题描述】：

我有这份清单

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

有没有办法通过查询的“id”来选择每个

？

我试过这样，但现在可以工作了

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

感谢您的回答，但以上都不起作用..我试过了

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

并且我能够看到 qtip。但仅适用于列表中的第一个 (key1)。尝试

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

或

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

它不适合我.. =/

【问题讨论】：

你为什么要做这样的事情？
我正在使用 Dynatree 和 qTip 插件，我想在每个节点中放置一个带有图像的工具提示。
其实我不明白你想做什么selection。如果你想获取所有li，只需使用$("li")，如果你想要基于其id的特定元素，只需使用$("#someIdName")

标签： jquery jquery-selectors html-lists

【解决方案1】：

只需使用id 选择器：

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

id 的值必须在页面上是唯一的，因此保留所有其他内容让jQuery 使用document.getElementByID，并且选择器既美观又简单（例如，快速）解析和应用。（当然，如果您希望选择器在key1 不是li 时归档，那么您需要完整的选择器。但通常这不是您想要的。）

请注意，您的某些 id 值需要转义，因为其中包含 .。要转义 .，您可以在选择器的前面放置一个反斜杠。因为选择器是在 JavaScript 字符串中，所以你必须转义反斜杠才能真正将反斜杠放入选择器，所以你使用了两个：

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

【讨论】：

【解决方案2】：

为什么要多出冒号:？你不需要它。

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

【讨论】：

【解决方案3】：

是的。

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

另外，因为它是一个 ID，而且很可能是唯一的。你可以简单地使用：

$("#key1")

【讨论】：

【解决方案4】：

如果是按id选择，则无需指定类型、类或父类。 ID 应该是唯一的。

例如，如果你想同时选择所有的key1、key2和key3，你可以使用下面的选择器来选择它们：

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

或者一一选择：

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

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

或者你可以做这样的事情来指定一个键列表，而不是重复 qtip 的选择和初始化：

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

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

});

【讨论】：