How to find class of an dynamic created object by js?

Question

I have an element div which is created by js, i want to get it class. I try to getElementsByClassName('lt-label')(it works), than i want to check if lt-label has class lt-online and if it true the another block on the page is block. My code:

$(document).ready(function() {
    if (document.getElementsByClassName) {
        var redTags = document.getElementsByClassName('lt-label');
        if (redTags.is(".lt-online")) {
            $("#l-b-wrapper").css({
                'display': 'block'
            });
        };
    };
});

But it doesn't work. Where i have mistake?

I give a link only because the html code is big and i can't show my problem full .Site http://www.zemelushka.ru/test/

lt-label - is a right page widget button

l-b-wrapper - left page widget button

Satpal · Accepted Answer · 2015-11-30 09:00:29Z

2

You are mixing native and jQuery, Use jQuery object since document.getElementsByClassName will return you an array-like object and they don't have jQuery methods

$(document).ready(function() {
    if ($('.lt-label').is(".lt-online")) {
        $("#l-b-wrapper").css({
            'display': 'block'
        });
    };
});

edited Nov 30, 2015 at 9:00

answered Nov 30, 2015 at 8:25

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

Jai Over a year ago

slight typo, in the condition.

Rory McCrossan · Accepted Answer · 2015-11-30 08:27:50Z

0

You have a really odd mix of native JS and jQuery which is causing the problem.

getElementsByClassName returns an array of DOMElements which do not have the is() method. If you use jQuery to select your elements you can both avoid the problem and shorten your code:

$(function() {
    if ($('.lt-label').hasClass('.lt-online')) {
        $("#l-b-wrapper").show();
    }
});

Note that if there are multiple .lt-label elements found you may need to loop over them, depending on the behaviour you require.

answered Nov 30, 2015 at 8:27

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

3 Comments

Rory McCrossan Over a year ago

I don't understand what you mean.

Alex Over a year ago

doesn't work. Paste your code but nothing changes. If i write getElement ant alert inside function(only to test) it works, but $('.lt-label').hasClass - not...

Rory McCrossan Over a year ago

Could you please add your HTML to the question.

Bhojendra Rauniyar · Accepted Answer · 2015-11-30 08:35:05Z

0

To work with jquery methods you need jQuery Object otherwise you'll get error: method is undefined. So, you may also wrap javascript object with jquery like this:

if ($(redTags[0]).is(".lt-online")) {

Where, redTags is wrapped by jQuery ie. $() and we use [0] for first element as getElementsByClassName result array-like object.

But I would choose simply jQuery object while I work with jquery for simplicity:

$('.lt-label') instead of document.getElementsByClassName('lt-label');

edited Nov 30, 2015 at 8:35

answered Nov 30, 2015 at 8:30

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

2 Comments

Alex Over a year ago

If i can do it only with document.getElementsByClassName('lt-label')?

Bhojendra Rauniyar Over a year ago

Yes, you can see the answer.

Jai · Accepted Answer · 2015-11-30 08:36:13Z

0

As you should know jQuery has it's own dictionary of methods and it works only with jQuery objects. And you are trying to bind a jQuery method .is() to a dom object which causes in error because .is() is available only for jq objects.

So this would do it (creating a jq wrapper):

$(redTags).is(".lt-online")

and you can shorten it like:

$(document).ready(function() {
    var redTags = $('.lt-label');
    $("#l-b-wrapper").css({
        'display': function(){
            return redTags.is(".lt-online") ? "block" : "none";
         }
    });
});

If you just want to show/hide the element then you can use .toggle(boolean) method:

$(document).ready(function() {
    var redTags = $('.lt-label');
    $("#l-b-wrapper").toggle(redTags.is(".lt-online"));
});

edited Nov 30, 2015 at 8:36

answered Nov 30, 2015 at 8:30

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

How to find class of an dynamic created object by js?

l-b-wrapper - left page widget button

4 Answers 4

1 Comment

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

l-b-wrapper - left page widget button

4 Answers 4

1 Comment

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related