user4329628 user4329628 - 1 year ago 32
CSS Question

Locate the value of an attribute, match and find the value on other elements and alter the css

So essentially I am trying to find the value of an attribute, in this instance, 'data-location', and then search for that value elsewhere, in this instance in the form of an ID, and alter the CSS for that matched value.

I have the below so far which I thought would work, but I am not sure how to check for various different values for various elements and apply accordingly, so I have grouped the different sections in div's with classes so I can break them up from one another.

Thanks guys



var getvalue = $('ul#test').find('li').attr('data-location');

if( $('div.other div').attr('id').val() == getvalue ) {
$( this ).css('background-color','red');
};

#thebirchplot3 {
padding:30px;
background:#fff;
}
#theashplot3 {
padding:30px;
background:blue;
color:#fff;
}
#thediveplot1 {
padding:30px;
background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1 id="title">Change CSS based on values</h1>
<ul id="test">
<li data-location="thebirchplot3">one</li>
<li data-location="theashplot3">two</li>
<li data-location="thediveplot1">three</li>
</ul>
<ul id="show">
<li data-location="theashplot3">one</li>
<li>two</li>
<li>three</li>
</ul>
<ul id="display">
<li data-location="thediveplot1">one</li>
<li>two</li>
<li>three</li>
</ul>
------
<div>
<div class="other">
<div id="thebirchplot3">
adfasdfasfsafdsafdsfsadfdsafdsafdsfafadsf
</div>
<div id="theashplot3">
adfasdfasfsafdsafdsfsadfdsafdsafdsfafadsf
</div>
<div id="thediveplot1">
adfasdfasfsafdsafdsfsadfdsafdsafdsfafadsf
</div>
</div>
</div>




Answer Source

You need to do it like below:-

Working Example:-

$('ul#test').find('li').each(function(){ // iterate over each li element
  var ultest = $(this); //assign current li object to variable
  $('div.other').children().each(function(){ // now iterate to each child div of other div
     if($(this).attr('id') == ultest.data('location')){ // compare id with data-location
      $( this ).css('background-color','red'); // if same then add background color
     }
  });
});
#thebirchplot3 {padding:30px;background:#fff;}
#theashplot3 {padding:30px;background:blue;color:#fff;}
#thediveplot1 {padding:30px;background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="title">Change CSS based on values</h1>
<input type="text" id="myTextField"/>
<input type="submit" id="byBtn" value="Change" onclick="change()"/>
<ul id="test">
    <li data-location="thebirchplot3">one</li>
    <li data-location="theashplot3">two</li>
    <li data-location="thediveplot1">three</li>
</ul>
<ul id="show">
    <li data-location="theashplot3">one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ul id="display">
    <li data-location="thediveplot1">one</li>
    <li>two</li>
    <li>three</li>
</ul>
------
<div>
  <div class="other">
    <div id="thebirchplot3">
    this is dummy
    </div>
    <div id="thebirchplot355435">
    text
    </div>
    <div id="theashplot3">
    which shows you
    </div>
    <div id="theashplot35465464">
    that everything
    </div>
    <div id="thediveplot1">
    working fine now
    </div>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download