comparing HTML text content with jQuery

Question

I have a page where a specific div shows the ID for the user's "system role" like so:

<div id="systemRoleIndicator" style="display: none;">
    <p>Z</p>
</div>

I can detect the value fine with jQuery, but I can't seem to actually use it for anything. For instance, I never receive the completion message in this code:

<script src="/scripts/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var role = $("#systemRoleIndicator").text();
    alert("Your role is: " + role); //displays proper value
    if (role == "Z") {
        alert("Code completed!");
    }
</script>

Why might this be? Am I missing something about comparing strings?

Milind Anantwar · Accepted Answer · 2015-12-29 06:57:21Z

6

Text for #systemRoleIndicator will also return leading and trailing space near p node. which returns text " Z " and not "Z".You need to either compare with the text of p element.:

var role = $("#systemRoleIndicator p").text();

or trim the text content of #systemRoleIndicator:

var role = $("#systemRoleIndicator").text().trim();

edited Dec 29, 2015 at 6:57

answered Dec 29, 2015 at 6:52

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cliff Over a year ago

Ah, that makes perfect sense. Thanks!

Collectives™ on Stack Overflow

comparing HTML text content with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related