CODEWITHSUNDEEP
jqueryhtmlcssjquery-selectors
CodeGust
CodeGust

Reputation: 845

jquery selector: child elements of the same class inside divs of different classes

There are two divs with classes ".div1" and ".div2". Each of them contains the same code - the same elements with the same class names. If I need to set/get a value of an element inside one of the divs, how do I refer to those elements? I try the following:

var hostPopup = "hostdiv" + selectedPopup + " "; // where selectedPopup = "1" or "2"
$(hostPopup + '.testColor').css('background-color', rgba);
$(hostPopup + '.testColorText').css({'color': rgba, '-webkit-filter': 'invert(100%)', 'filter': 'invert(100%)'});

It does not work. But if I use the hostPopup to specify the host div only for one operation - that works for the first line here:

$(hostPopup + '.testColor').css('background-color', rgba);
$('.testColorText').css({'color': rgba, '-webkit-filter': 'invert(100%)', 'filter': 'invert(100%)'});

Works!

Here is an example of a piece of my html:

<div class="hostdiv1" style="padding: 0;"> <!-- hostdiv2 has exactly the same code in it -->
    <div class="NamesDiv nameTypesDiv" style="background-color: dimgray;">
    <div class="namesClass">
        <b>1.</b> Add names
    </div>
    <div class="testColor" style="background-color: rgb(124,124,124); color: white;"><p class="testColorText">Test</p></div>
    <div class="rangeDiv" style="height: 120px;">
    <div class="rangeBars"><input type="range" class="rangeR" min="0" max="100" value="50" tabindex="0"></input>
    <output for="rangeR" class="outR outRange">50</output></div>

So, why $(".nodeDiv1class .itsinnerelementclass").'action'... does not wish to work with itsinnerelementclass element that is located somewhere inside the element with class of nodeDiv1class ?

Upvotes: 0

Views: 165

Answers (1)

Jimbali
Jimbali

Reputation: 2518

I think you need a dot at the start of hostPopup so that jQuery knows that it's a class.

Upvotes: 1

Related Questions