使用jquery </li>更改jquery和css设计访问<li data-value =“2”>

Question

使用jquery和css设计更改访问<li data-value = "2">

<ul>
<li data-value = "2"> white </ li>
<li data-value = "1"> gray background </ li>
<li data-value = "1"> gray background </ li>
<li data-value = "1"> gray background </ li>
</ ul>

有人可以帮助我，因为我可以用jquery来做。

Answer 1

您可以使用CSS属性选择器：

/* retrieves those <li> elements, with the 'data-value' attribute
   equal to "1": */
li[data-value="1"] {
  background-color: #fff;
}
li[data-value="2"] {
  background-color: #ccc;
}

＆＃13;

＆＃13;

ul {
  border: 1px solid #000;
  padding: 0.5em;
  background-color: #0af;
}

li {
  border: 1px solid #000;
}

li[data-value="2"] {
  background-color: #fff;
}

li[data-value="1"] {
  background-color: #ccc;
}

＆＃13;

<ul>
  <li data-value="2">white</li>
  <li data-value="1">gray background</li>
  <li data-value="1">gray background</li>
  <li data-value="1">gray background</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

或者，使用JavaScript：

// get a NodeList of the relevant elements:
var dataValueElems = document.querySelectorAll('li[data-value="1"],li[data-value="2"]'),
// a simple map of the data-value to the desired colour:
    valueToColor = {
      '1' : '#ccc',
      '2' : '#fff'
    };

// iterating over the array-like NodeList, using
// Array.prototype.forEach:
Array.prototype.forEach.call(dataValueElems, function (li) {
  // if there is a colour associated with the data-value
  // attribute-value we set that colour as the background-color,
  // otherwise we use an empty string (which effectively sets no colour):
  li.style.backgroundColor = valueToColor[li.dataset.value] || '';
});

＆＃13;

＆＃13;

var dataValueElems = document.querySelectorAll('li[data-value="1"],li[data-value="2"]'),
    valueToColor = {
      '1' : '#ccc',
      '2' : '#fff'
    };

Array.prototype.forEach.call(dataValueElems, function (li) {
  li.style.backgroundColor = valueToColor[li.dataset.value] || '';
});

＆＃13;

ul {
  border: 1px solid #000;
  padding: 0.5em;
  background-color: #0af;
}

li {
  border: 1px solid #000;
}

＆＃13;

<ul>
  <li data-value="2">white</li>
  <li data-value="1">gray background</li>
  <li data-value="1">gray background</li>
  <li data-value="1">gray background</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

参考文献：

• CSS：
  • Attribute ([attribute="value"]) selectors。
• JavaScript的：
  • Array.prototype.forEach()。
  • document.querySelectorAll()。
  • Function.prototype.call()。
  • HTMLElement.dataset。
  • HTMLElement.style。

Answer 2

js代码看起来像这样，

$('li').each(function(){
  //alert($(this).data('value'));
    var v = $(this).data('value');
    if (v == '2'){
        $(this).css('background-color', '#f00');
    }
});

Demo

Answer 3

使用属性选择器

$('li[data-value=2]').css('color','red');

的 DEMO