Как получить идентификатор родительского div с помощью jquery

Question

У меня есть следующие HTML-дивы. Я заполняю все представление в цикле, что означает, что у меня может быть набор этих элементов. Я хочу переключить div "chart" и div "contact-layer". Но когда я делаю это, это не переключает точный div, я пытаюсь переключить, но первый, потому что я не могу дифференцировать div, поскольку все они имеют одинаковые имена классов, за исключением самого первого div. т.е. цель1, цель2, цель3 и т. д.

Теперь я хочу получить идентификатор самого первого div, который варьируется для каждого представления. Я знаю, что для получения родительского идентификатора div я могу использовать

$(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]

Это даст вам верхний элемент из ваших критериев поиска. Надеется, что это поможет вам.