using jquery contains to get an element and add class

Question

I'm trying to create dynamic navigation. When the screen size is that of a phone I am using a bootstrap list group but when I resize it I am using nav pills. What I'm trying to do is capture the current element with the active class so that when I resize the window it will add the class 'active' to which ever tag contains the text saved in variable currentTab. Currently I know I'm entering the changeActive function and have the text but I can not get it to add the active class.

<div id='navigation'>
  <div class="list-group">
    <a href="#" class="list-group-item active">About</a>
    <a href="#" class="list-group-item">Animals</a>
    <a href="#" class="list-group-item">Adoptly</a>
    <a href="#" class="list-group-item">Blog</a>
    <a href="#" class="list-group-item">Events</a>
  </div>
</div><!--End of navigation-->

Javascript

$( document ).ready(function() {
  var listHTML = '<div class="list-group"><a href="#" class="list-group-item active">About</a><a href="#" class="list-group-item">Animals</a><a href="#" class="list-group-item">Adoptly</a><a href="#" class="list-group-item">Blog</a><a href="#" class="list-group-item">Events</a></div>'
  var pillsHTML ='<ul class="nav nav-pills"><li role="presentation" class="active"><a href="#">About</a></li><li role="presentation"><a href="#">Animals</a></li><li role="presentation"><a href="#">Adoptly</a></li><li role="presentation"><a href="#">Blog</a></li><li role="presentation"><a href="#">Events</a></li></ul>'

function checkWidth() {
    var windowsize = $(window).width();
    var current = document.getElementsByClassName('active');
    var displayText = current[0].textContent;

    if (windowsize > 425) {
        //if the window is greater than 440px wide then turn on jScrollPane..
        $( "#navigation" ).empty();
        $( "#navigation" ).html(pillsHTML);
        checkActive(displayText);
    }
    else
        {
           $( "#navigation" ).empty();
           $( "#navigation" ).html(listHTML);
           checkActive(displayText);
        }
}

function checkActive(currentTab){
    console.log(currentTab);
    $('a:contains(currentTab)').addClass('active');
}

checkWidth();
// Bind event listener
$( window ).resize(checkWidth);

$('#navigation').on('click','.list-group-item',function(e){
var previous = $(this).closest(".list-group").children(".active");
previous.removeClass('active'); // previous list-item
$(e.target).addClass('active'); // activated list-item
 });
});

I created a different solution other than using contains so I'm going to post it here so that people know I've moved on but if someone actually has a solution using contains I will check back to pick as solution.

function checkWidth() {
    var windowsize = $(window).width();
    var current = document.getElementsByClassName('active');
    var displayText = current[0].textContent;

    if (windowsize > 425) {
        //if the window is greater than 440px wide then turn on jScrollPane..
        $( "#navigation" ).empty();
        $( "#navigation" ).html(pillsHTML);
        checkActive(displayText,true);
    }
    else
        {
           $( "#navigation" ).empty();
           $( "#navigation" ).html(listHTML);
           checkActive(displayText,false);
        }
}

function checkActive(currentTab, bool){
    console.log(bool);
    if(bool)
        {
           $('li').removeClass('active');
           var element = document.getElementById(currentTab);
           $(element).addClass('active');
        }
    else
        {
            $('.list-group-item').removeClass('active');
            var element = document.getElementById(currentTab);
            $(element).addClass('active');
        }
}

Answer 1

I saw your code and i think there is a misunderstanding, you're using your functions just when the document is ready, so your function $( window ).resize() its running just one time (when the DOM loaded) even if you resize the windows the DOM don't will change since you reload the pages and in this moment your functions runs but at the same time your active element will lose and the page will select the default element, so i suggest use the function:

$( window ).resize(function() {
    //console.log("window size"+$(window).width());
    //Here your code that change each time that you resize your window
});

I guess you want to create a response design page which its even more simple just adding css and using bootstrap features, just combine @media(max-min width) and add a collapse boostrap , this is a clear example of that: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_band_complete&stacked=h