如何获取父div的类名

Posted 2023-02-25

【中文标题】如何获取父div的类名

【英文标题】：How to get classname of parent div

【发布时间】：2016-06-02 20:01:10

【问题描述】：

我在几个嵌套的 div 中有一个复选框。在其 OnChange 事件中，我想获取父 div/容器 div pan-box placeholder 的类名。

HTML 结构是这样的

<div class="pan-box placeholder" producttype="I" price="34.99" data-productname="$34.99 Standard 15">
    <div class="pan-box-head col-md-12 no-pad">
        <div class="col-md-7 col-sm-12 no-pad pan-price">
        </div>
        <div class="col-md-5 col-sm-12 no-pad">
                <input type="button" value="View Details" class="viewbtn" onclick="CallOfferRenderAction('SP115','TWCv6')">
                <div class="phone">
                    <input type="checkbox" class="SelectedOffer" id="SP115" onchange="SaveCompairedOffers(this);">
                </div>
        </div>
    </div>
</div>

我尝试了以下代码，但它返回了类名phone，它是复选框的直接父级。如何获得第一个 div 类？

$(this).parent().prop('className');

【问题讨论】：

你可以重复 .parent().parent() 等来上链。或者，如果您对特定注释有更多了解，可以使用 .closest(someSelector) 来点击它。

虽然非常脆弱，但您可以将对 parent() 的调用链接在一起，但是更好的解决方案可能是使用最接近的() 和一些标识符（类名或数据属性）

【参考方案1】：

.parent() 只返回元素的直接父元素。

您应该像这样使用closest()：

$(this).closest('div.pan-box').prop('className');

【参考方案2】：

如果我得到你，你应该这样做：

$(function()
    "use strict";

    $('.SelectedOffer').on('change', function() 
        console.log($(this).closest('.placeholder').attr('class'));
    );
);

详情见jsfiddle