CODEWITHSUNDEEP
javascriptjqueryhtmlcssclass
Donatas Veikutis
Donatas Veikutis

Reputation: 1004

JQuery: Selecting elements with unique class AND id

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

Upvotes: 2

Views: 2172

Answers (3)

musefan
musefan

Reputation: 48415

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

Upvotes: 7

CraigTP
CraigTP

Reputation: 44919

$("#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.

i.e:
$("#id.class").html()

Upvotes: 0

GregL
GregL

Reputation: 38121

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.

Upvotes: 0

Related Questions