JQuery：选择具有唯一类和 id 的元素答案

【问题标题】：JQuery: Selecting elements with unique class AND idJQuery：选择具有唯一类和 id 的元素
【发布时间】：2012-03-09 09:18:17
【问题描述】：

我有这个 html 代码：

<div class="category" id="154"> Category </div>

<div class="category2" id="156"> Category2 </div>

<div class="category3" id="157"> Category3 </div>

<div class="category4" id="158"> Category4 </div>
<input type="text" />

例如，如果我在文本框中写了一个 id，如何选择具有此 ID 的 div .category 并获取内部 HTML 文本。使用 jQuery

【问题讨论】：

要选择带有id=153的元素，您必须在CSS中使用#\31 23，或者在使用JavaScript Selectors API（或使用它的实现，如jQuery）时使用$('#\\31 23'); ）。见CSS character escape sequences。

标签： javascript jquery html css class

【解决方案1】：

所以您只需要使用 ID，因为这是一个唯一值（或应该是）

var html = $("#154").html();

注意：如果您确实使用了重复的 ID 值，那么请务必注意 JQuery 只会选择第一个。

如果您想在输入文本框值时执行此操作，您可以在文本框更改事件中执行此操作...

$("input").change(function(){
   var id = $(this).val();
   var element = $("#" + id);
   if(element){
      var html = element.html();
      //do something with html here
   }
});

注意：您可能需要在文本框上放置一个 ID 值，以确保您获得正确的控制

虽然我强烈建议您找到使用重复 ID 值的方法，但您可以使用这样的函数来获取所需的 DIV...

function GetContent(className, id) {
    var result = null;
    var matchingDivs = $("." + className);
    matchingDivs.each(function(index) {
        var div = $(matchingDivs[index]);
        if (div.attr("id") == id) {
            result = div.html();
        }
    });

    return result;
}

Click here for working example

【讨论】：

但是如果我有其他类似 id 的元素，我可以按类 + ID 选择元素吗？
@DonatasVeikutis：不，Jquery 不会按照您想要的方式处理重复的 ID 值。如果必须有重复项，则可以改用 name 属性。类似...$(".class [name=154]").html(); - 如果您必须有重复的 ID，您可以循环匹配类中的每个 div 并找到 id（为此在帖子中添加一些内容）
@Donatas：重复的 ID 在 HTML 中根本无效。有一些方法可以实现您想要的，但如果您创建有效的 HTML，总体上会更好。
@DonatasVeikutis：请尝试使用唯一的 ID 值，但如果您确实必须复制它们...请参阅我的编辑以获取帮助您的功能；）
我试图弄清楚如何通过特定类查找元素，然后获取该元素的 ID。这个功能（稍作改动）完成了工作！谢谢！

【解决方案2】：

我建议你给文本框一个 ID，以防你在页面中添加其他文本框。

但是，如果您只有 1 个文本输入，则以下内容将起作用：

 var id = $('input:text:first').val();
 var innerHtml = $('#' + id).html();

Here is a jsFiddle 将在文本框中的文本发生更改时使用此技术提醒 html。

【讨论】：

【解决方案3】：

$("#id.class")

将通过类和 ID 选择必要的元素（当然，用它们各自的名称替换 id 和 class）。

在末尾添加.html() 即可获得内容。

即：
$("#id.class").html()

【讨论】：

#id 和 .class 之间不应有空格。否则，它将找到 ID 为 id 的元素的类 class 的后代。