CODEWITHSUNDEEP
jqueryelement
user2272143
user2272143

Reputation: 469

How can I get parent name of an element returned by .first()?

I need to get the name of the parent of an element returned by element.first()

I try with this code but i get the error:

Uncaught TypeError: $(...).first(...)[0].parent is not a function

var elName = $('#services_list').first('div.owl-item.active')[0].parent().attr('name');

The html is:

<div id="services_list" class="main_comments wow fadeInUp" data-wow-duration="1.5s">
    <div class="main_comments_content">
        <div name="prod1" class="single_comments text-center">
            <a>Product 1</a>
        </div>
        <div name="prod2" class="single_comments text-center">
            <a>Product 2</a>
        </div>
        <div name="prod3" class="single_comments text-center">
            <a>Product 3</a>
        </div>
        <div name="prod4" class="single_comments text-center">
            <a>Product 4</a>
        </div>
    </div>
</div>

But there is a script that change the structure in this way:

<div id="services_list" class="main_comments wow fadeInUp animated" data-wow-duration="1.5s" style="visibility: visible; animation-duration: 1.5s; animation-name: fadeInUp;">
    <div class="main_comments_content owl-carousel owl-theme owl-responsive--1 owl-loaded">
        <div class="owl-stage-outer">
            <div class="owl-stage" style="transform: translate3d(-2340px, 0px, 0px); transition: all 0.25s ease 0s; width: 9360px;">
                <div class="owl-item cloned" style="width: 1170px; margin-right: 0px;">
                    <div name="prod3" class="single_comments text-center">
                        <a>Product 3</a>
                    </div>
                </div>
                <div class="owl-item cloned" style="width: 1170px; margin-right: 0px;">
                    <div name="prod4" class="single_comments text-center">
                        <a>Product 4</a>
                    </div>
                </div>
                <div class="owl-item active" style="width: 1170px; margin-right: 0px;">
                    <div name="prod1" class="single_comments text-center">
                        <a>Poduct 1</a>
                    </div>
                </div>
                <div class="owl-item" style="width: 1170px; margin-right: 0px;">
                    <div name="prod2" class="single_comments text-center">
                        <a>Product 2</a>
                    </div>
                </div>
                <div class="owl-item" style="width: 1170px; margin-right: 0px;">
                    <div name="prod3" class="single_comments text-center">
                        <a>Product 3</a>
                    </div>
                </div>
                <div class="owl-item" style="width: 1170px; margin-right: 0px;">
                    <div name="prod4" class="single_comments text-center">
                        <a>Product 4</a>
                    </div>
                </div>
                <div class="owl-item cloned" style="width: 1170px; margin-right: 0px;">
                    <div name="prod1" class="single_comments text-center">
                        <a>Product 1</a>
                    </div>
                </div>
                <div class="owl-item cloned" style="width: 1170px; margin-right: 0px;">
                    <div name="prod2" class="single_comments text-center">
                        <a>Product 2</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="owl-controls">
            <div class="owl-nav">
                <div class="owl-prev" style="display: none;"><i class="lnr lnr-chevron-left"></i></div>
                <div class="owl-next" style="display: none;"><i class="lnr lnr-chevron-right"></i></div>
            </div>
            <div class="owl-dots" style="">
                <div class="owl-dot active"><span></span></div>
                <div class="owl-dot"><span></span></div>
                <div class="owl-dot"><span></span></div>
                <div class="owl-dot"><span></span></div>
            </div>
        </div>
    </div>
</div>

Now checking again the structure I realized thet I need the name of the child, not the parent.

So I need to find the div class="owl-item active" and then the name of the child.

I changed the code in this way but I still get elName = Undefined.

elName = $('#services_list').first('div.owl-item.active').children().attr('name');

If I put the line:

element = $('#services_list').first('div.owl-item.active');

in the debug I see that it can find the element. But the problem is it don't find the children.

Update:

I have changed first() with find() because first() don't return the correct element and in this way it work:

el = $('#services_list').find('div.owl-item.active').children('div').attr('name');

Upvotes: 1

Views: 122

Answers (1)

isherwood
isherwood

Reputation: 61083

As the commenters have said, refactor to this so you're working with jQuery objects and not native DOM elements:

var elName = $('#services_list div.owl-item.active').first().parent().attr('name');

The combination of first() and parent() is a bit odd and makes me think you can simplify, though. Questions about jQuery should always include a representative HTML snippet.

Upvotes: 1

Related Questions