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

回答

相關問題