Set element width based on class

Question

I'm trying to set the width of an image depending on the class of seperate div using jQuery. I thought I could use an if statement but it isn't working.

$(document).ready(function() {
  if ($('#map-container').hasClass('zoom-100, zoom-130, zoom-150')) {
    $('#marker').css("width", 70);
  } else if ($('#map-container').hasClass('zoom-70, zoom-80')) {
    $('#marker').css("width", 40);
  } else {
    $('#marker').css("width", 25);
  }
});

This is not how .hasClass works, it expects a single class name as parameter. If you want to test if the element has any of these classes, then you need to join multiple hasClass calls using || — misorude
– misorude, Commented Oct 26, 2018 at 10:20
TBO i think you should solve this in CSS only. you can nest selectors. no jquery required — Philipp Sander
– Philipp Sander, Commented Oct 26, 2018 at 10:21

gavgrif · Accepted Answer · 2018-10-26 11:07:10Z

If #marker is a child of #map-container, you dont need jquery - just use css and target the div accordingly. First set the base size and then set the size according to the parents classes.

 #marker {
   width: 25px;
 }

 #map-container.zoom-70 #marker,
 #map-container.zoom-80 #marker {
  width: 40px;
 }

 #map-container.zoom-100 #marker,
 #map-container.zoom-130 #marker,
 #map-container.zoom-150 #marker {
  width: 70px;
 }

If #marker is a sibling of #map-container, you still dont need jquery - just use css and target the div via the general sibling combinator "~". First set the base size and then set the size according to the siblings classes.

 #marker {
   width: 25px;
 }

 #map-container.zoom-70 ~ #marker,
 #map-container.zoom-80 ~ #marker {
  width: 40px;
 }

 #map-container.zoom-100 ~ #marker,
 #map-container.zoom-130 ~ #marker,
 #map-container.zoom-150 ~ #marker {
  width: 70px;
 }

If you absolutely, positivly have to use jquery - then you can use a switch statement which is always better than multiple if statements.

Note that multiple statements can be blocked together and then the default statement occurs if none of the preceding statements evaluate to true.

The following snippet demonstrates the different switch statements;

updateDiv();
 
 
 $('#class-selector').change(function(){
  document.querySelector('#map-container').className = 'zoom-' + $(this).val();
  updateDiv();
})

function  updateDiv() {
  switch(true) {
      case $('#map-container').hasClass('zoom-150'):
      case $('#map-container').hasClass('zoom-130'):
      case $('#map-container').hasClass('zoom-100'):
          $('#marker').css("width", 70).text('70px');
          break;

      case $('#map-container').hasClass('zoom-80'):
      case $('#map-container').hasClass('zoom-70'):
          $('#marker').css("width", 40).text('40px');
          break;

      default:
          $('#marker').css("width", 25).text('25');
  }
}

#map-container {
  border: solid 1px red;
  padding: 15px;
}

#marker {
  background: blue;
  color: white;
  text-align: center
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="map-container" class="zoom-100">
<p>This div with the red border is #map-container and the the following blue div is #marker. Changing the select list below will apply the different class to #map-container and will change the blue div accordingly.</p>

<label>Select a different size to apply to the div</label>
<select id="class-selector">
  <option value="">None</option>
  <option value="70">zoom-70</option>
  <option value="80">zoom-80</option>
  <option value="100" selected>zoom-100</option>
  <option value="130">zoom-130</option>     
  <option value="150">zoom-150</option>
</select>

<hr/>



 <div id="marker"></div>
</div>

Thanks @AlivetoDie - I enjoy the challenge of finding different ways to solve problems. Cheers :)

Ercan Peker · Accepted Answer · 2018-10-26 10:22:11Z

1

use jQuery is() method

  $('#map-container').is('.zoom-100, .zoom-130, .zoom-150')

answered Oct 26, 2018 at 10:22

Ercan Peker

1,66212 silver badges18 bronze badges

Comments

Nattamai Jawaharlal Manikandan · Accepted Answer · 2018-10-26 10:26:14Z

1

$(document).ready(function(){
    if ($('#map-container.zoom-100.zoom-130.zoom-150').length) {
        $('#marker').css("width", 70);
    }
    else if ($('#map-container.zoom-70.zoom-80').length) {
        $('#marker').css("width", 40);
    }
    else {
        $('#marker').css("width", 25);
    }
});

answered Oct 26, 2018 at 10:26

Nattamai Jawaharlal Manikandan

2261 silver badge8 bronze badges

Comments

pandamakes · Accepted Answer · 2018-10-26 10:21:46Z

0

use js logic operators:

if( $('#myID').hasClass('class1') && $('#myID').hasClass('class2') ){
  /* do something */
}

answered Oct 26, 2018 at 10:21

pandamakes

6214 silver badges9 bronze badges

Comments

Mark Baijens · Accepted Answer · 2018-10-26 10:25:10Z

0

As others mantioned, you can do this by css depending on your html. But if for some reason you want to use jQuery you can do it be using an or for each class.

var $mapCon = $('#map-container')

if ($mapCon.hasClass('zoom-100') || $mapCon.hasClass('zoom-130') || $mapCon.hasClass('zoom-150')) {
  $('#marker').css("background-color", "pink");
} else if ($mapCon.hasClass('zoom-70') || $mapCon.hasClass('zoom-80')) {
  $('#marker').css("background-color", "lightblue");
} else {
  $('#marker').css("background-color", "yellow");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map-container" class="zoom-70">container</div>
<div id="marker">test</div>

answered Oct 26, 2018 at 10:25

Mark Baijens

13.3k11 gold badges51 silver badges77 bronze badges

Comments

Karan Verma · Accepted Answer · 2018-10-26 10:27:58Z

0

hasClass() uses only one argument. You could find it on JQuery official doc.

You will have to implement multiple conditions.

answered Oct 26, 2018 at 10:27

Karan Verma

691 silver badge11 bronze badges

Comments

Daniel Sixl · Accepted Answer · 2018-10-26 10:31:48Z

0

.hasClass only accepts one parameter for checking for a single class. An alternative is to use the jQuery is function.

 if ($("#map-container").is(".zoom-100,.zoom-130,.zoom-150")) {
   $('#marker').css("width", 70);
 }

It doesn't make too much sense to use jQuery here. CSS would make much more sense, if there is not a special reason not mentioned in your example.

answered Oct 26, 2018 at 10:31

Daniel Sixl

2,5192 gold badges20 silver badges30 bronze badges

Comments

LDS · Accepted Answer · 2018-10-26 10:35:40Z

do not take multiple class names separated by coma in has calss method . the solution is bellow code

 $(document).ready(function () {
            //if ($('#map-container').hasClass('zoom-100, zoom-130, zoom-150')) {
            if ($('#map-container').hasClass('zoom-150')) {
                $('#marker').css("width", 270);
            }
            else if ($('#map-container').hasClass('zoom-130')) {
                
                $('#marker').css("width", 340);
            
            }
            else if ($('#map-container').hasClass('zoom-70')) {
                
                $('#marker').css("width", 40);
            } else {
                $('#marker').css("width", 25);
            }
        });

Collectives™ on Stack Overflow

Set element width based on class

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related