Edit: one missing piece of information - I can't use the class selector because there are more divs with the same class. I already thought of that, but I forgot to mention it. I have no idea why my post got downvoted, but it seems awfully silly considering I provided a lot of information, gave it honest effort, and tried to be verbose with code examples. People on this forum are ridiculous sometimes.

I'm trying to set the id of a div that doesn't have one and there's no way I can give it one upon generation of the page. I've tried using jquery (.each, .contains, .find, .filter, etc.) and I can't seem to get it right. I know a ton of people have asked this question, but none of the answers made sense to me.

I have the ability to set the text (html?) of the div, but nothing else. It ends up looking like this:

<div class="dhxform_note" style="width: 300px;">Remaining letters: 500</div>

I want a handle to the div object so I can show the user how many more letters they can type by updating the text.

Using this:

$("div")

returns a list of all divs on the page. I can see the target div in the list, but I can't get jquery to return a single object.

I know it can also be done with something like this:

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
    if( /^Remaining letters/.test(divs[i].innerText) )
        divs[i].id = "kudosMsgNote"
    }
}

but I was hoping to plete this with a cleaner looking solution involving jquery. I also simply want to know how to do it with jquery, aesthetics not withstanding.

Edit: one missing piece of information - I can't use the class selector because there are more divs with the same class. I already thought of that, but I forgot to mention it. I have no idea why my post got downvoted, but it seems awfully silly considering I provided a lot of information, gave it honest effort, and tried to be verbose with code examples. People on this forum are ridiculous sometimes.

I'm trying to set the id of a div that doesn't have one and there's no way I can give it one upon generation of the page. I've tried using jquery (.each, .contains, .find, .filter, etc.) and I can't seem to get it right. I know a ton of people have asked this question, but none of the answers made sense to me.

I have the ability to set the text (html?) of the div, but nothing else. It ends up looking like this:

<div class="dhxform_note" style="width: 300px;">Remaining letters: 500</div>

I want a handle to the div object so I can show the user how many more letters they can type by updating the text.

Using this:

$("div")

returns a list of all divs on the page. I can see the target div in the list, but I can't get jquery to return a single object.

I know it can also be done with something like this:

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
    if( /^Remaining letters/.test(divs[i].innerText) )
        divs[i].id = "kudosMsgNote"
    }
}

but I was hoping to plete this with a cleaner looking solution involving jquery. I also simply want to know how to do it with jquery, aesthetics not withstanding.

• javascript
• jquery
• select

• 3 And the reason you do not use a class selector? – epascarello Commented Apr 5, 2013 at 20:15
• 1 What about the <div> are you targeting? The class attribute? Its text? Or the simple fact that it doesn't have an id attribute? Something else? – Ian Commented Apr 5, 2013 at 20:17
• I said I wanted to update the text in the div to have changing text when the user enters items. That was obvious in my explanation I think. – Anthony Commented Apr 5, 2013 at 20:22
• 1 @Anthony Sorry, I mean how do you want to find the <div>? In your last example, you're looking for it by looking at its .innerText and matching against it containing "Remaining letters". Is that definitely how you want to find it? Or is there some other characteristic about it that could make it easier? – Ian Commented Apr 5, 2013 at 20:27
• Oh, I see what you're saying. Sorry. The only thing I can do to the div is change its innerText. I'm using a library that doesn't allow you to set any other attributes of the element unfortunately. – Anthony Commented Apr 5, 2013 at 21:14

6 Answers 6

Use a class selector.

var theDivViaTheClass = $(".dhxform_note");

Class Selector (“.class”)

Description: Selects all elements with the given class.

version added: 1.0 jQuery( ".class" )

• class: A class to search for. An element can have multiple classes; only one of them must match.

For class selectors, jQuery uses JavaScript's native getElementsByClassName() function if the browser supports it.

You seem to be targeting the <div> by its text. Try using the :contains selector:

$("div").filter(':contains("Remaining letters")').first().attr("id", "kudosMsgNote");

The .first() is to make sure you don't set the same id for multiple elements, in case multiple elements contain the text "Remaining letters".

Here's the docs for the :contains selector: http://api.jquery./contains-selector/

Be careful, the text you're looking for is case sensitive when using :contains!

Is that div the only one with the class dhxform_note? If so, you can use the class selector:

$('.dhxform_note').html();

With jQuery, you can specify any css selector to get at the div:

$(".dhxform_note").attr("id", "kudosMsgNote");

will get you this element as well.

Selecting on inner text can be a bit dicey, so I might remend that if you have control over the rendering of that HTML element, you instead render it like this:

<div name="remainingLetters" class="dhxform_note" style="width: 300px">Remaining Letters:  500</div>

And get it like this:

$("[name=remainingLetters]").attr("id", "kudosMsgNote");

However, it's possible that you really need to select this based on the inner text. In that case, you'll need to do the following:

$("div").each(function() {
    if ( /^Remaining letters/.test($(this).html()) ) {
        $(this).attr("id", "kudosMsgNote");
    }
});

If you cannot set id for whatever reason, I will assume you cannot set class either. Maybe you also don't have the exclusive list of classes there could be. If all those assumptions really apply, then you can consider down your path, otherwise please use class selector.

With that said:

$("div").filter(function() {
    return /^Remaining letters/.test($(this).text())
}).attr('id', 'id of your choice');

For situations where there are multiple divs with the class dhxform_note and where you do not know the exact location of said div:

$("div.dhxform_note").each(function(){
    var text = $(this).text();
    if(/^Remaining letters/.test(text)){
        $(this).attr("id", "kudosMsgNote");
    }
});

EXAMPLE

If, however, you know that the div will always be the 2nd occurrence of dhxform_note then you can do the following:

$("div.dhxform_note").get(1).id = "kudosMsgNote";

EXAMPLE

Or do a contains search:

$("div.dhxform_note:contains('Remaining letters')").first().attr("id", "kudosMsgNote");

EXAMPLE