Add style dynamically not working

Question

sorry for my english. i want to hide a div in my site. i am using this code

  $('ul .tab li').attr("style", "display: none");

This work on all web browsers. but when i look in to this by my ipad. there is error present. After some google search i found that attr is not supported some ipad browsers. Then i can only use javascript for styling my website dynamically. when i use this code i got an error that

  document.querySelectorAll('ul .tab li').style.display = "none";
  document.querySelectorAll('ul .tab li li').style.display = "block";

error is

  Uncaught TypeError: Cannot set property 'display' of undefined 

if anyone know about this please help me.

Answer 1

Try

$('ul .tab li').css("display", "none");

Also,

is lib a class assigned to the ul element? In which case, the right way to do it is

$('ul.tab li').css("display", "none");

Remove the space between the ul and .tab

UPDATE:

querySelectorAll returns an Array . That is why you can not directly use .style attribute. You will have to loop through that array to apply that style to the selected elements.

Answer 2

Try to use Jquery css()

  $('ul .tab li').css("display", "none");
   AND
  $('ul .tab li').css("display", "block");

Answer 3

You can do this:

var nodes = document.querySelectorAll('ul .tab li');
for (var i = 0; i < nodes.length; i++) {
    nodes[i].style.display = 'block'; //Or none
}

Here is a simple example

Answer 4

try this pure javascript:

var list=document.getElementsByTagName("UL")[0];
var list1=list.getElementsByClassName('tab'); 
list1.getElementsByTagName("LI")[0].style.display = "none";

Answer 5

你可以用

$('ul .tab li').hide();