CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Asia Dep
Asia Dep

Reputation: 47

How to call a element by a class name inner a class and use it

<html>
    <body>
        <div class="hdd">
            <div class="hdd_Left">
                A
            </div>
            <div class="hdd_Center">
                B
            </div>
            <div class="hdd_Right">
                C
            </div>
        </div>
    </body>
</html>

I want to use call a variable

<script>
    $(".hdd").each(function() {
        $(this).fadeTo(500,1);
        $(this).getElementsByClassName("hdd_Left").animate({'margin-right': '100px'},"slow"); //doesn't work
    }
</script>

$(this).getElementsByClassName("hdd_Left").animate({'margin-right': '100px'},"slow");

This line doesn't work.

Thank you

Upvotes: 1

Views: 51

Answers (2)

Rudolf Erasmus
Rudolf Erasmus

Reputation: 1

The problem you are facing is that there is no getElementByBlassName method call on that object.

Actual error when calling getElementByBlassName

Instead, you need to use something like:

        $(document).ready(function(){        
            $(".hdd").each(function() {
                $(this).fadeTo(500,1);
                var childrenItems = $(this).children(".hdd_Left");
                childrenItems.animate({'margin-right': '100px'},"slow"); //works fine
            })
        });

Since the above code works 100% but didn't do much on my screen, I have added an additional method to show you another way of doing it in jquery, but with some animations on all child items:

        $(document).ready(function(){        
            $('.hdd > div').each(function () { 
               $(this).animate({
                width: "70%",
                opacity: 0.4,
                marginLeft: "0.6in",
                fontSize: "3em",
                borderWidth: "10px"
              }, 1500 );
            })
        });

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 121998

You should actually write. Do not mix Vanilla JS and Jquery.

$(this).find(".hdd_Left").animate({'margin-right': '100px'},"slow");

Upvotes: 2

Related Questions