如何使用jquery获取父div id

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元素,该元素是元素父元素之一.