Converting pure JS to jquery for array[i].className?

Question

I have a pure JS function in which i have tried to convert majority to jquery. How do I set the entire function to a proper jquery syntax?

 function openResources(e, resourceName) {
    var i, tabcontent, tabs;
    tabcontent = $(".resources__all-tabs-container");

    for (i = 0; i < tabcontent.length; i++) {;
        tabcontent[i].style.display = "none";
    }

    tabs = $(".resources__tabs");

    for (i = 0; i < tabcontent.length; i++) {
        tabs[i].className = tabs[i].className.replace(" 
 resources__all-tabs", "");
    }

    document.getElementById(resourceName).style.display= "block";
    //$(`"`+ resourceName + `"`)[0].style.display ="block";
    e.currentTarget.className += " resources__all-tabs";

 }

D. Braun · Answer 1 · 2018-03-07T09:08:14.393

This:

tabcontent = $(".resources__all-tabs-container");
for (i = 0; i < tabcontent.length; i++) {;
    tabcontent[i].style.display = "none";
}

Would be:

$(".resources__all-tabs-container").hide();

see here: http://api.jquery.com/hide/

This:

tabs = $(".resources__tabs");
for (i = 0; i < tabcontent.length; i++) {
    tabs[i].className = tabs[i].className.replace("resources__all-tabs", "");
}

Should be replaced with:

$(".resources__tabs").removeClass("resources__all-tabs")

See here: https://api.jquery.com/removeclass/

This:

document.getElementById(resourceName).style.display= "block";

Has to be replaced with:

$("#" + resourceName).show();

See here: http://api.jquery.com/show/

This:

e.currentTarget.className += " resources__all-tabs";

Should be:

$(e.currentTarget).addClass("resources__all-tabs");

See here: jquery addClass() not working with event.target

Zenoo · Accepted Answer · 2018-03-07T08:56:52.963

0

Don't forget you can chain functions in jQuery.

function openResources(e, resourceName) {
  $(".resources__all-tabs-container").hide();
  $(".resources__tabs").removeClass('resources__all-tabs');
  $('#' + resourceName).show();
  $(e.currentTarget).addClass('resources__all-tabs');
}

edited Mar 07 '18 at 08:56

answered Mar 07 '18 at 08:51

Zenoo

12,670
4
45
69

void · Answer 3 · 2018-03-07T08:54:19.200

0

function openResources(e, resourceName) {
  $(".resources__all-tabs-container").hide();
  $(".resources__tabs").removeClass("resources__all-tabs");
  $("#" + resourceName).show();
  $(e.currentTarget).addClass("resources__all-tabs");
}

Should be the equivalent code.

edited Mar 07 '18 at 08:54

answered Mar 07 '18 at 08:52

void

36,090
8
62
107

`this` is not necessarily what OP wants. Plus he wants to show `#resourceName`, not hide it. – Zenoo Mar 07 '18 at 08:53
@Zenoo oh yea missed that. Edited. – void Mar 07 '18 at 08:55

score 0 · Answer 4 · edited Mar 07 '18 at 08:55

0

function openResources(e, resourceName) {
    var tabcontent = $(".resources__all-tabs-container"), 
        tabs = $(".resources__tabs");

    // hide all tabs and show the one that matches `resourceName`
    tabcontent.hide().filter('#' + resourceName).show();

    // set current tab as selected
    $(e.target).addClass('resources__all-tabs')
}

edited Mar 07 '18 at 08:55

mplungjan

169,008
28
173
236

answered Mar 07 '18 at 08:52

Slim

1,924
1
11
20

Tony Stonks · Answer 5 · 2018-03-07T08:56:10.360

-1

Something like this:

function openResources(e, resourceName) {
      $('.resources__all-tabs-container').each(function() {
          $(this).hide();
      })

      $('.resources__tabs').each(function() {
          $(this).removeClass('.resources__tabs');
      })

      $('#'+resourceName).show();
      $(e.target).addClass('resources__all-tabs');
   }

edited Mar 07 '18 at 08:56

answered Mar 07 '18 at 08:55

Tony Stonks

360
3
13

No need for each - see the other answers – mplungjan Mar 07 '18 at 08:55

Converting pure JS to jquery for array[i].className?

5 Answers5