jQuery：选择具有唯一类和ID的元素

Question

I have this html code:

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

So in example if I write a id in text box, how to select div .category with this ID and get inner HTML text. With jQuery

Answer 1

so you only need to use the ID as this is a unique value (or should be)

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

NOTE : If you do have duplicate ID values in use then it is important to note that JQuery will only select the first one.

---

if you want to do this when a textbox value is entered you could do this on the textbox change event...

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

NOTE : you may want to put an ID value on your textbox to ensure you get the correct control

---

Although I strongly suggest you find a way around using duplicate ID values, you could have a function like this to get the DIV you want...

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

Answer 2

I recommend you give the textbox an ID, in case you add other textboxes to the page.

But if you only have the 1 text input, the following would work:

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

Here is a jsFiddle that will alert the html using this technique whenever the text in the textbox changes.

Answer 3

$("#id.class")

will select the necessary element by both class and ID (replacing id and class with their respective names, of course).

Adding .html() to the end will get you the content.

ie:
$("#id.class").html()