I am unable to get the parent element of the anchor tag

Question

HTML code:

<ul class="nav nav-tabs">
    <li role="presentation" id="tab1" class="active"><a onclick="switchTabs(1)">Tab1</a></li>
    <li role="presentation" id="tab2"><a onclick="switchTabs(2)">Tab2</a></li>
</ul>

JS code: no error occurred while clicking, but not do switching

function switchTabs(idx) {
    // this is not working
    var $li = $(this).parent();
    if($li.hasClass('active')) {
        return false; // not enter here
    }
    $li.removeClass('active');
    if (idx === 1) {
        $li.next().addClass('active');
    } else {
        $li.prev().addClass('active');
    }

    // but this works while using id selector
    /*if (idx === 1) {
        $("#tab1").addClass('active');
        $("#tab2").removeClass('active');
    } else if(idx === 2) {
        $("#tab2").addClass('active');
        $("#tab1").removeClass('active');
    }*/
    return false;
}

What can be the reason?

You did not define `this` while calling the function. It's better to assign a listener with jQuery instead of using `onclick` in the template. Then, jQuery will do this part for your. — ssc-hrep3, Aug 20 '19 at 09:54
https://stackoverflow.com/questions/12485759/onclick-function-this-returns-window-object — JimmyN, Aug 20 '19 at 10:09

manelseo · Accepted Answer · 2019-08-20T10:12:09.187

Try this approach I think that will be better solution for your case

<html>
<head>
    <meta charset="utf-8"/>
</head>

<style>
    .active {
        color: red;
    }
</style>

<body>
<ul class="nav nav-tabs">
    <li role="presentation" id="tab1" class="active"><a onclick="switchTabs(this)">Tab1</a></li>
    <li role="presentation" id="tab2"><a onclick="switchTabs(this)">Tab2</a></li>
</ul>
</body>

<script
              src="https://code.jquery.com/jquery-3.4.1.js"
              integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
              crossorigin="anonymous"></script>

<script>

function switchTabs(elm) {
    var $li = $(elm).parent();
    if(!$li.hasClass('active')) {
        $li.addClass('active');
        $li.siblings().removeClass('active');
    }
}

</script>

Thanks! it did the job. – Bahramdun Adil Aug 20 '19 at 10:11 — Bahramdun Adil, Aug 20 '19 at 10:11

score 2 · Answer 2 · answered Aug 20 '19 at 09:58

2

Send the element into the function, and then you will have it's parent:

<a onclick="switchTabs(this,1)">

and then

function switchTabs(elm,idx) {
// this is not working
  var $li = $(elm).parent();
  // Rest of your code...

answered Aug 20 '19 at 09:58

Gugu

193
1
8

score 0 · Answer 3 · answered Aug 20 '19 at 10:00

Check this method to make it easier (and use the $(this))

$(document).on('click','.nav li a', function(){                                      
  let tab = $(this).data('tab');//$(this) is the a clicked.                                      
  $('.nav li.active').removeClass('active');//hide active Tab
  $('.nav li#tab'+tab).addClass('active');//show Tab
})

.active{font-size:20px;color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
    <li role="presentation" id="tab1" class="active"><a data-tab="1">Tab1</a></li>
    <li role="presentation" id="tab2"><a data-tab="2">Tab2</a></li>
</ul>

score 0 · Answer 4 · answered Aug 20 '19 at 10:20

You are passing only index and not this object to switchTab function. You can make use of idx to get the clicked li and then put logic to add / remove active class.

See code below

function switchTabs(idx) {
    // this is not working
    //var $li = $(this).parent(); -- you are not passing this anywhere in the function hence it is not getting
    $('li').removeClass('active'); // remove all active 
    var $li = $('#tab' + idx).addClass('active'); // use idx to create tab id of clicked li and add active class
}

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<ul class="nav nav-tabs">
    <li role="presentation" id="tab1" class="active"><a onclick="switchTabs(1)">Tab1</a></li>
    <li role="presentation" id="tab2"><a onclick="switchTabs(2)">Tab2</a></li>
</ul>

I am unable to get the parent element of the anchor tag

4 Answers4