如何获取 .first() 返回的元素的 parent 名称？

Question

我需要获取由 element.first()

编辑的 return 元素的 parent 的名称

我尝试使用此代码，但出现错误：

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

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

html是：

<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>

但是有一个脚本是这样改变结构的：

<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>

现在再次检查结构我意识到我需要 child 的名称，而不是 parent。

所以我需要找到 div class="owl-item active" 然后是 child 的名称。

我以这种方式更改了代码，但我仍然得到 elName = Undefined。

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

如果我放行：

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

在调试中我看到它可以找到元素。但问题是它找不到 children.

更新：

我已将 first() 更改为 find() 因为 first() 没有 return 正确的元素，因此它可以工作：

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

Answer 1

正如评论者所说，对此进行重构，以便您使用 jQuery 对象而不是原生 DOM 元素：

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

first() 和 parent() 的组合有点奇怪，但我认为您可以简化。关于 jQuery 的问题应始终包含具有代表性的 HTML 片段。

如何获取 .first() 返回的元素的 parent 名称？

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

jquery

element