CODEWITHSUNDEEP
javascriptjquery
Rajnikanth
Rajnikanth

Reputation: 2785

jQuery change inline style of multiple div element

I have bellow html code and want to change

inline style

display:block

to

display:none

Where class is ln-b to ln-z

<div class="filter-div ln-b" style="display: block;"></div>
<div class="filter-div ln-c" style="display: block;"></div>
<div class="filter-div ln-d" style="display: block;"></div>
<div class="filter-div ln-e" style="display: block;"></div>
<div class="filter-div ln-f" style="display: block;"></div>
<div class="filter-div ln-g" style="display: block;"></div>
<div class="filter-div ln-h" style="display: block;"></div>
<div class="filter-div ln-i" style="display: block;"></div>
<div class="filter-div ln-j" style="display: block;"></div>
<div class="filter-div ln-k" style="display: block;"></div>
<div class="filter-div ln-l" style="display: block;"></div>
<div class="filter-div ln-m" style="display: block;"></div>
<div class="filter-div ln-n" style="display: block;"></div>
<div class="filter-div ln-o" style="display: block;"></div>
<div class="filter-div ln-p" style="display: block;"></div>
<div class="filter-div ln-q" style="display: block;"></div>
<div class="filter-div ln-r" style="display: block;"></div>
<div class="filter-div ln-s" style="display: block;"></div>
<div class="filter-div ln-t" style="display: block;"></div>
<div class="filter-div ln-u" style="display: block;"></div>
<div class="filter-div ln-v" style="display: block;"></div>
<div class="filter-div ln-w" style="display: block;"></div>
<div class="filter-div ln-x" style="display: block;"></div>
<div class="filter-div ln-y" style="display: block;"></div>
<div class="filter-div ln-z" style="display: block;"></div>

Any ideas or suggestions? Thanks.

Upvotes: 0

Views: 272

Answers (5)

M Thomas
M Thomas

Reputation: 1192

Try this: 

$('div[class*="ln-"]').css('display','none');

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

I'd suggest (assuming they appear in that order and are siblings), and also that there's a .filter-div.ln-a element that you don't want to hide:

$('.filter-div.ln-b').nextUntil($('.ln-z').next()).addBack().css('display','none');

JS Fiddle demo.

References:

Upvotes: 3

Somnath Kharat
Somnath Kharat

Reputation: 3610

You can use:attr

$(".filter-div").attr('style', 'display:none');

DEMO

Upvotes: 0

Ganesh Pandhere
Ganesh Pandhere

Reputation: 1652

$('div[class*="ln-"]').hide();

Upvotes: 0

Sasidharan
Sasidharan

Reputation: 3740

$(".filter-div").css("display","none");

or

$('.filter-div').each(function() {
   $(this).css("display","none"); 
}

Upvotes: 0

Related Questions