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

Question

I have a submenu divided in two parts:in the right side a li which contains a link and in the left side an icon for each li.

Icons use a css class,called 'submenubtn'.I want to make a javascript function which takes the link from the closest li,assign to that icon,and when that icon is clicked,the link should be open in a new tab.

I hope I was clear enough,please ask me anything you didnt'n undertand.

here is the code i have until now:

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

link returns "undifined".

I don't know how much this will help,but the html page:

<?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?>
<?/?>

EDIT I solved the problem..see in my answer the solution

Answer 1

Use window.location.href = link; and closest() function of JQuery to get what you want

To open it on a new window add window.open(link, '_blank')

Answer 2

i think using data tags is the solution

here the soure: http://api.jquery.com/data/

new li html:

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

your new 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 element cannot contain href attribute, you can give your li a data attribute such as:

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

then you can use:

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

find() used to find the descendants of your element which is not applicable in your case since your anchor is the child of your li element.

So you need to use closest() to traverse up the DOM tree and get the closest parent li instead.

---

Try to use:

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

Answer 4

Problem solved

I managed to solve this...it was pretty simple.

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