jQuery ближайший возвращает неопределенный

Question

У меня есть сгенерированный код аккордеона jqueryui:

<div id="treeview-accordion">
<h3><a href="#" accindex="0">Basic</a></h3>
<div>
    <ul class="navigation-treeview treeview-sanjo" id="yw0">
        <li><span style="font-weight:bold"><a href="/sanjo/site/index"> Home</a></span>
            <ul>
                <li><span> Profile</span>
                    <ul>
                        <li><span><a href="/sanjo/user/profile"> View Profile</a></span></li>
                        <li><span><a href="/sanjo/user/profile/edit"> Update Profile</a></span></li>
                        <li><span><a href="/sanjo/user/profile/changepassword"> Change Password</a></span></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><span> Personnel Management</span>
            <ul>
                <li><span><a href="/sanjo/user/admin"> Manage Personnel</a></span>
                <ul>
                    <li><span><a href="/sanjo/user"> List Personnel</a></span></li>
                    <li><span> Add Personnel</a></span></li>
                </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
<h3><a href="#" accindex="0">Basic2</a></h3>
<div>
    <ul class="navigation-treeview treeview-sanjo" id="yw01">
        <li><span style="font-weight:bold"><a href="/sanjo/site/index2"> Home2</a></span>
            <ul>
                <li><span> Profile</span>
                    <ul>
                        <li><span><a href="/sanjo/user/profile2"> View Profile2</a></span></li>
                        <li><span><a href="/sanjo/user/profile/edit2"> Update Profile2</a></span></li>
                        <li><span><a href="/sanjo/user/profile/changepassword2"> Change Password2</a></span></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><span> Personnel Management2</span>
            <ul>
                <li><span><a href="/sanjo/user/admin2"> Manage Personnel2</a></span>
                <ul>
                    <li><span><a href="/sanjo/user2"> List Personnel2</a></span></li>
                    <li><span> Add Personnel2</a></span></li>
                </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

и я хочу получить атрибут accindex соответствующего тега h3 в зависимости от нажатой ссылки.

Например, я нажал на «Просмотреть профиль», и, поскольку он расположен под «h3» (Basic), я хочу получить значение его атрибута accindex, которое равно «0».

Я пытался использовать closest (), но он возвращает "undefined". Я также не могу использовать родителей ().

Как я мог выполнить такую ​​задачу? Пожалуйста, помогите мне.

Спасибо.

Answer 1

Вот рабочая скрипка: http://jsfiddle.net/mrchief/M6PcW/

$('a.link').click(function() {
    alert($(this).closest('div').prev('h3').children('a').attr('accindex'));
    return false;
});

Я изменил вашу разметку, чтобы добавить класс к нужному href (чтобы сделать выбор простым). Например. <a class="link" href="/sanjo/user/profile/edit"> Update Profile</a>

Answer 2

Прежде всего, ссылка «Просмотреть профиль» не находится внутри h3, она в родственнике h3.Попробуйте это

Когда вы нажимаете на ссылку просмотра профиля, попробуйте это

accindex = $(this).closest("div").prev("h3").find("a").attr("accindex");

Примечание: В приведенном выше коде this представляет привязку, по которой щелкают.

Answer 3

Похоже, вам нужно использовать 'find' или 'children'.

Таким образом, чтобы получить атрибут в теге привязки, который вы бы сделали (при использовании контекста H3):

$("h3 a").attr("accindex");

или

$("h3").find("a").attr("accindex");

или

$("h3").children("a").attr("accindex");

Я предполагаю, что ваше событие щелчка использует тег привязки в качестве своего выбора, поэтому вам может потребоваться просто:

$(this).attr("accindex");

Нажмите «Базовый» здесь.http://jsfiddle.net/hns2H/1/

Answer 4

Ссылка 'Просмотр профиля' не является дочерней по отношению к <h3>, поэтому parents() и closest() не работают. Вам нужно пройти вверх по DOM от ссылки на <ul>, затем на <div>, затем вы можете получить <h3>.

Предполагается, что this является ссылкой:

$(this).closest('ul.navigation-treeview').closest('div').prev('h3');

должен получить <h3>, который вы хотите.

Оттуда получите вложенный <a> и его индекс.

var acc = $(this).closest('ul.navigation-treeview').closest('div').prev('h3').find('a');
acc.attr('accindex');

ДЕМО: http://jsfiddle.net/yWsDx/

РЕДАКТИРОВАТЬ: $(this).closest('div').prev('h3').find('a') должно быть в порядке, .closest('ul.navigation-treeview') не нужно.