JQuery的：选择具有独特的class和id

我有这样的HTML代码的元素：JQuery的：选择具有独特的class和id

<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

来源

2012-03-09 Donatas Veikutis

选择以['ID = 153'（http://mothereff.in/css-escapes#0123），你将不得不使用'＃\ 31元23'在CSS中，或$（'＃\\ 31 23'）;'当使用JavaScript Selectors API（或使用它的实现，如jQuery）。参见[CSS字符转义序列]（http://mathiasbynens.be/notes/css-escapes）。 – 2012-03-09 09:20:57

所以你只需要使用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

来源

2012-03-09 09:21:24 musefan

但如果我有其他具有类似id的元素，我可以通过class + ID选择元素吗？ – 2012-03-09 09:26:51

@DonatasVeikutis：不，Jquery不会用重复的ID值满足您的需要。如果您必须有重复项，则可以使用name属性。类似于......'$（“。class [name = 154]”）。html（）;' - 如果你必须有重复的ID，就可以在匹配的类中循环每个div并找到id这篇文章） – musefan 2012-03-09 09:32:53

@Donatas：重复的ID在HTML中是无效的。有办法实现你想要的，但是如果你想创建有效的HTML，总体上会更好。 – 2012-03-09 09:35:55

我建议你给文本框的ID，如果你添加其他文本框来这一页。

但是如果你只拥有1个文本输入，下面将工作：

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

Here is a jsFiddle，将使用这种技术提醒HTML每当在文本框中的文本更改。

来源

2012-03-09 09:21:41 GregL

$("#id.class")

将选择由两个类和ID（与各自的名称替换id和class，当然）的必要元素。

添加.html()到最后会让你的内容。

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

来源

2012-03-09 09:25:02 CraigTP

'＃id'和'.class'之间不应有空格。否则，它会找到ID为id的元素的类“class”的*后代*。 – 2012-03-09 09:36:29

@FelixKling - 哎呀，你说得对。修订。 – CraigTP 2012-03-09 09:40:25

JQuery的：选择具有独特的class和id

回答

相关问题