Get elements by two classes

Question

I am using getElementsByClassName to fund multiple elements and change their style but as I found out getElementsByClassName is not cross-browser compatible. Can you please help me to simplifie this code. I would prefer a native JS implementation but jQuery will be probably better so it is also fine....

So how can I then loop through the elements an depending on individual class change some style....

var ele = document.getElementsByClassName("dhSliderMobile"); 

    for (var i = 0; i < ele.length; i++) {
        if (ele[i].style.display === "block") {
            ele[i].style.display = "none";

            var div = document.getElementsByClassName("dhImageInfoDiv");
            var div1 = document.getElementsByClassName("dhSeriesInfoDiv");
            for (var j = 0; j < div.length; j++) {
                div[j].style.right = 0 + "px";
                div1[j].style.right = 0 + "px";

            }
        }
        else {
            ele[i].style.display = "block";

            var div = document.getElementsByClassName("dhImageInfoDiv");
            var div1 = document.getElementsByClassName("dhSeriesInfoDiv");

            for (var j = 0; j < div.length; j++) {
                div[j].style.right = 40 + "px";
                div1[j].style.right = 40 + "px";
            }
        }
    }



    var ele = document.getElementsByClassName("dhSliderDesktop");    
    for (var i = 0; i < ele.length; i++) {
        if (ele[i].style.display === "block") {
            ele[i].style.display = "none";

            var div = document.getElementsByClassName("dhImageInfoDiv");
            var div1 = document.getElementsByClassName("dhSeriesInfoDiv");
            for (var j = 0; j < div.length; j++) {
                div[j].style.right = 0 + "px";
                div1[j].style.right = 0 + "px";

            }
        }
        else {
            ele[i].style.display = "block";

            var div = document.getElementsByClassName("dhImageInfoDiv");
            var div1 = document.getElementsByClassName("dhSeriesInfoDiv");

            for (var j = 0; j < div.length; j++) {
                div[j].style.right = 20 + "px";
                div1[j].style.right = 20 + "px";
            }
        }
    }

Ravi Gadag · Accepted Answer · 2013-03-06T12:50:43.607

2

try like this, class selector can be used via . read here more : Class Selector

 var multipleClassresults= $('.yourClass1, .yourClass2');

 var singleClassResults= $('.yourClass1');

if you want to loop the results then do like this

$.each(multipleClassresults,function(index, item){
    if($(item).hasClass('yourClassToCheck'))
    {
     //then do some styling 
    }
});

edited Mar 06 '13 at 12:50

answered Mar 06 '13 at 12:45

Ravi Gadag

15,735
5
57
83

```singlefoundObj``` may gives multiple elements too. – Murat Çorlu Mar 06 '13 at 12:50

score 1 · Answer 2 · edited Mar 06 '13 at 12:49

1

You can select elements with class names like as under. You can read more about class selector over here

elem = $('.classname'); //elements having class `classname`

elem = $('.classname1, .classname2'); //elements  having class `classname1` or  `classname2`

edited Mar 06 '13 at 12:49

Musa

96,336
17
118
137

answered Mar 06 '13 at 12:44

Adil

146,340
25
209
204

So how can I then loop through the elements an depending on individual class change some style.... – Jacob Mar 06 '13 at 12:52
@Jacob Updated the answer. you can check my answer. – Ravi Gadag Mar 06 '13 at 12:55

score 0 · Answer 3 · answered Mar 06 '13 at 12:56

To do CSS changes with jQuery its like that. You can also use event handlers if they meet the conditions of your counter to do some stuff. Anyways this will point you in the right way (I hope)

$('.dhImageInfoDiv, .dhSeriesInfoDiv').css({
  'margin-left':'40px',
  'display':'block' 
})

Kind regards, M

score 0 · Answer 4 · answered Mar 06 '13 at 12:58

0

I think, your code will be like that with jQuery

$('.dhSliderMobile').toggle(function() {
    if ($(this).is('visible')) { // if is visible
        $('.dhImageInfoDiv, .dhSeriesInfoDiv').css('right', '40px');
        return false; // then set invisible
    }else{
        $('.dhImageInfoDiv, .dhSeriesInfoDiv').css('right', 0);
        return true; // set visible
    }
});

More info about jQuery.toggle

answered Mar 06 '13 at 12:58

Murat Çorlu

8,207
5
53
78

I know it hasn't exactly same functionality of yours. I wanted to give an example that may show you main idea. – Murat Çorlu Mar 06 '13 at 13:06

Get elements by two classes

4 Answers4