CODEWITHSUNDEEP
jquery
worked
worked

Reputation: 5880

jQuery Conditional

I simply need to apply a css style to a particular class that meets my criteria. With a simple array I'm able to do this:

var ins = document.getElementsByClassName('ins');
for(var i = 0; i < ins.length; i++) {
if(ins.item(i).attributes[0].value == "ins right" || ins.item(i).attributes[0].value == "ins left") 
    ins[i].style.width = "120px"; //applies the width to left and right only
}

What is the equivalent when using jQuery? (unfortunately this applies the width to all three elements)

if($('.ins').is('.left, .right'))
    $('.ins').css('width','120px');

Markup:

<div id="wrapper">
  <div id="outer">
    <div class="ins right">
      <p>This is heading 3</p>
    </div>
    <div class="ins left">
      <p>This is heading 1</p>
    </div>
    <div class="ins center">
      <p>This is heading 2 This is heading 2 This is heading 2 This is heading 2 This is heading 2 This is heading 2 This is heading 2 This is heading 2</p>
    </div>
  </div>
</div>

Upvotes: 2

Views: 860

Answers (5)

Kevin B
Kevin B

Reputation: 95058

Your original way used a loop that went through each individual element. You need to have jquery do the same thing.

Try this, it uses implicit iteration.

$(".ins").filter(".left,.right").css('width','120px');

Upvotes: 1

Sascha Galley
Sascha Galley

Reputation: 16101

very simple, try the following:

$('.ins.right, .ins.left').css('width','120px');

Upvotes: 1

bububaba
bububaba

Reputation: 2870

$(".ins.left, .ins.right").css({/*...*/})

Upvotes: 1

bfavaretto
bfavaretto

Reputation: 71939

$('.ins.left, .ins.right').css('width','120px');

Upvotes: 2

Joseph Marikle
Joseph Marikle

Reputation: 78590

You can just do this:

$('.ins.left, .ins.right').css('width','120px');

Upvotes: 4

Related Questions