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>

我想要实现的是根据单击的链接获取适当的“h3”标签的属性“accindex”。

例如，我点击“查看个人资料”，由于它位于“h3”（基本）下，所以我想获取其accindex属性的值，即“0”。

我尝试使用closest()，但它返回“未定义”。我也不能使用parents()。

我怎样才能完成这样的任务呢？请帮助我。

谢谢。

Answer 1

首先，“查看个人资料”链接不在 h3 内，而是在 h3 的同级中。尝试这个

当您单击查看个人资料链接时尝试这个

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

注意：在上面的代码中 this 代表被单击的锚点。

Answer 2

这是一个工作小提琴： http://jsfiddle.net/mrchief/M6PcW/

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

我将您的标记修改为将类添加到所需的 href（以方便选择）。
例如 更新个人资料

Answer 3

看起来您需要使用“查找”或“子项”。

因此，要获取锚标记中的属性，您需要执行以下操作（当使用 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

“查看个人资料”链接不是

的子链接，这就是为什么 parents() 和 closest() 没有工作。需要从链接向上遍历DOM到

，再到
，然后就可以得到

了。。

假设 this 是链接：

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

应该得到您想要的

。

从那里获取随附的 及其 accindex。

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') 不是必需的。