找到属性的值，匹配并找到其他元素的值并更改css

Question

所以基本上我试图找到一个属性的值，在这个例子中，'data-location'，然后在其他地方搜索该值，在这个例子中以ID的形式，并为此改变CSS匹配值。

到目前为止，我认为可以使用以下内容，但我不确定如何检查各种元素的各种不同值并相应地应用，所以我将div中的不同部分与类分组，以便我可以打破它们彼此相依

谢谢你们

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

你需要像下面这样做： -

工作示例： -

＆＃13;

＆＃13;

$('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
     }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用jquery find()方法作为您的要求

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

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

工作小提琴是js fiddle