Question

我有以下html div。我在循环中填充整个表示，这意味着我可能有一组这些div。我想切换div“chart”和div“contact-layer”。但是当我这样做时它并没有切换我尝试切换的确切div而是第一个，因为我无法区分div，因为除了第一个div之外它们都有相同的类名。即goal1，goal2，goal3等。

现在我想获取第一个div的id，它对每个表示都有所不同。我知道要获取父div ID我可以使用

$(this).parents('div').attr('id');

但我不知道如何在这种情况下获取第一个div，所以我可以得到第一个div下的确切div。

<div id="goal1">
<div class="goal-parent">
            <div class="goal">

                <div id="top-layer">

                    <div id="component">
                        <select class="component-select">
                            <option id="one">WEBINAR SIGN-UPS</option>
                            <option id="one">WEBINAR SIGN-UPSwwewewew</option>
                            <option id="one">WEBINAR SIGN-UPS</option>
                            <option id="one">WEBINAR SIGN-UPS</option>
                            <option id="one">WEBINAR SIGN-UPS</option>
                        </select>
                        <span id="width_tmp"></span>
                    </div>
                    <div id="period">
                        <select class="period-select">
                            <option>Weekly</option>
                            <option>Daily</option>
                            <option>Quarterly</option>
                            <option>Six months</option>
                            <option>Yearly</option>
                        </select>
                        <span id="width_tmp"></span>
                    </div>
                    <div id="close"><i class="fa fa-times"></i></div>

                </div>

                <div id="second-layer">
                    <div id="count">14 544</div>
                    <div id="trend"><i class="fa fa-sort-asc fa-2x"></i></div>
                    <div id="progress-bar"></div>
                </div>

                <div id="third-layer">
                    <div id="avarage">avarage: 16 345</div>
                    <div id="target">target: 20 000</div>
                </div>

                <div id="chart">

                </div>

                <div id="bottom-layer">

                    <div id="romi">ROMI: $30.543</div>

                    <div id="toggle-chart">
                        <div class="icon-chart"><i class="fa fa-line-chart fa-lg"></i></div>
                    </div>

                    <div id="toggle-contact">
                        <div class="icon-contact"><i class="fa fa-user fa-lg" ></i></div>
                    </div>

                </div>

                <div id="contact-layer">

                    <div id="haeder-layer">
                        <div id="title-one">Contact</div>
                        <div id="title-two">Last visit</div>
                    </div>

                    <div id="contacts">
                        <div id="contact-name"> <img src="<?=APP_URL?>corporate/images/icons/ix_op_all/16x16/plain/user1.png" class="navicon">
                            <a href=""> KlausTrolle, Follow-Up Systems AB</a>
                        </div>
                        <div id="contact-visit"> 2 days ago</div>
                        <div id="contact-name"> <img src="<?=APP_URL?>corporate/images/icons/ix_op_all/16x16/plain/user1.png" class="navicon">
                            <a href=""> KlausTrolle, Follow-Up Systems AB</a>
                        </div>
                        <div id="contact-visit"> 2 days ago</div>
                        <div id="contact-name"> <img src="<?=APP_URL?>corporate/images/icons/ix_op_all/16x16/plain/user1.png" class="navicon">
                            <a href=""> KlausTrolle, Follow-Up Systems AB</a>
                        </div>
                        <div id="contact-visit"> 2 days ago</div>
                    </div>
                    <div id="show-all">SHOW ALL CONTACTS</div>
                    <div id="bottom-line"></div>

                </div>

            </div>
        </div>
    </div>

Answer 1

使用closest方法：

$(this).closest('div').attr('id');

.closest( selector ) Returns: jQuery

描述：对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

这将返回最近的 div元素，该元素是元素父元素之一。

Answer 2

$('ELEMENT').parent().attr('id');

Answer 3

据我所知，$(element).parents('div')将为您带来父级的分层堆栈，因此您可以$(element).parents('div').last()来获得第一个div。但是，如果您想要更准确，则应使用：compareDocumentPosition本机javascript属性。你可以这样做：

var arr=$.makeArray($(element).parents('div'));

arr.sort(function(a, b) {
                    if (a === b) return 0;
                    if (!a.compareDocumentPosition) {
                        // support for IE8 and below
                        return a.sourceIndex - b.sourceIndex;
                    }
                    if (a.compareDocumentPosition(b) & 2) {
                        // b comes before a
                        return 1;
                    }
                    return -1;
                });
var topElement=arr[0]

这将为您提供搜索条件中的最高元素。希望这会对你有所帮助。

如何使用jquery获取父div id

3 个答案:

`.closest( selector ) Returns: jQuery`