I am using the following strategy to tag my elements with classes so that I can hide/display based on a variable value.
<th class="address _type both postal" aria-label="Address">Address</th> <th class="postcode _type both postal" aria-label="Postcode">Postcode</th> <th class="email _type both email " aria-label="Email">Email</th> <th class="firstName _type both email postal" aria-label="First Name">First Name</th>
Here is my test function im working on; _inviteFormat
could be, email, postal or both
/*columns hide/display*/ if(_inviteFormat='Email') { var elArray = [] var classes = $('._type').attr('class').split(' ').toString(); //get all class names in class array if(classes.indexOf('email') == -1){ //search for email tagged columns by search for email class e = $('._type').attr('class').split(' ')[0] //return first class name in class array elArray.push(e) //push to element irrelevant columns } console.log(elArray) table.columns(elArray).visible(false); //hide columns }
Goal: to push into elArray
the name of the first class for all instances of elements on the page containing class _type
and that no email class is present so that I can then hide these elements.
Current behaviour: Only the first element class name is being pushed into the array.
Here is a list of all the columns in my table
I tried the following two scripts but they don’t work
const cols = document.querySelector("#bulkInvite"); const matches = cols.querySelectorAll(".type"); matches.forEach(function(cols) { console.log(cols); }); const nodeList = document.querySelectorAll(".type"); for (let i = 0; i < nodeList.length; i++) { console.log(nodeList[i]) }
Advertisement
Answer
That’s why, while $('._type')
returns a collection of jQuery objects, as soon as you chain .attr('class')
only the first element is returned.
Also, you have a typo (I guess) in the if
condition (you wrote if(_inviteFormat='Email')
, but should be if(_inviteFormat==='Email')
).
Finally, in your 2 scripts you’re querying for .type
but class name is ._type
This way it gets all irrelevant classes inside the array:
let _inviteFormat = 'Email'; if (_inviteFormat === "Email") { const elArray = []; $("._type").each((index, element) => { //loop inside collection const classes = $(element).attr("class").split(" "); //get all class names in class array if (classes.indexOf("email") === -1) { //search for email tagged columns by search for email class const e = $(element).attr("class").split(" ")[0]; elArray.push(e); //push to element irrelevant columns } }); console.log("These are the irrelevant classes:", elArray); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr> <th class="address _type both postal" aria-label="Address">Address</th> <th class="postcode _type both postal" aria-label="Postcode">Postcode</th> <th class="email _type both email " aria-label="Email">Email</th> <th class="firstName _type both email postal" aria-label="First Name">First Name</th> </tr> </thead> </table>