查找距离最近的li的链接并在新页面中打开-Javascript

Question

我有一个分为两部分的子菜单：右侧是一个包含链接的li，左侧是每个li的图标。

图标使用css类，称为“ submenubtn”。我想制作一个JavaScript函数，该函数获取最接近的li的链接，分配给该图标，然后单击该图标，则该链接应在新选项卡中打开。

我希望我足够清楚，请问我您是否不了解的任何内容。

这是我到目前为止的代码：

$(document).ready(function() {
    $("body").on("click", ".submenubtn", function() {
    var link = $(this).find("li").attr('href'); 
    //window.alert(link);
    window.open(link)
 });
 });

链接返回“未定义”。

我不知道这有多大帮助，但是html页面：

<?Menu?>
<div id="<?$_name?>" class="atk-menu atk-menu-vertical atk-popover">
<ul>
    <?Item?>
        <?MenuItem?>
        <li id="<?$id?>" class="<?$class?>"> <a href="<?$href?>"><i class="<?$icon?>"></i><?label?>MenuItem<?/?></a></li>
        <?/MenuItem?>
    <?/?>
    <?$Content?>
</ul>
</div>
<?MenuSeparator?><?/MenuSeparator?>
<?/?>

编辑我解决了问题..请参阅我的答案

Answer 1

使用window.location.href = link; 和jQuery的最近（）函数来获取所需的内容

要在新窗口中打开它，请添加window.open(link, '_blank')

Answer 2

我认为使用数据标签是解决方案

这里的来源： http ://api.jquery.com/data/

新李HTML：

<li data-url="HERE THE URL!"/>

您的新jQuery：

$(document).ready(function() {
    $("body").on("click", ".submenubtn", function() {
    var link = $(this).closest('li').data('url'); 
    //window.alert(link);
    window.open(link)
 });
 });

Answer 3

li元素不能包含href属性，您可以为li提供一个data属性，例如：

<li data-href="your url here"></li>

那么您可以使用：

$(document).ready(function () {
    $("body").on("click", ".submenubtn", function () {
        var link = $(this).closest('li').data('url');
        window.open(link, '_blank');
    });
});

find()用于查找元素的后代，由于您的锚点是li元素的子代，因此不适用于您的情况。

因此，您需要使用closest()遍历DOM树并获取最接近的父级li 。

---

尝试使用：

 $(document).ready(function () { $("body").on("click", ".submenubtn", function () { var link = $(this).closest('li').find('a').attr('url'); window.location.href(link); }); }); 

Answer 4

问题解决了

我设法解决了这个问题……这很简单。

$(document).ready(function() {
    $(".submenubtn").click(function() {
        a =   $(this).closest('a').attr('href');
        window.open(a);
        return false;
 });
 });