Javascript: jQuery hide/show dynamic condition (datatables)

Question

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])
}

cheesyMan · Accepted Answer · 2022-04-12 08:06:21Z

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>

Collectives™ on Stack Overflow

Javascript: jQuery hide/show dynamic condition (datatables)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related