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

Question

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 1

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>
<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>

Answer 2

use jquery find() method for your requirement as

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

$('div.other').find('#'+getvalue).css('background-color','red');

working fiddle is js fiddle