javascript - 如果属性等于某个值，则目标 HTML 元素

Question

我有一个 HTML 模板字符串，它为来自 Ajax 的每个用户 prepend 一些用户信息到 div > 打电话。每个 div 都有一个 data-stream 属性，其值为 false 或 true。

我想使用 JS 或 jQuery 定位 element 并使用 CSS 或 addClass 如果 value 为真。

如果值为真，可能会显示一个绿色图标，如果为假，则可能会显示一个红色图标。

JS

---

var target = $('#result')

target.prepend('<div data-stream="' + userObj.stream + '" class="item "> <a target="_blank" href="' + userObj.url + '"> <img class="logo" src="' + userObj.logo + '"/> <span class="name">' + userObj.name + '</span> </a> </div>')

我的尝试

  if ( typeof $(".item").attr('data-stream') === "true" ) {
            // style div here..
          }

那行不通，也行不通:

 $('.item').filter(function(){
               var $this = $(this)
               return $this.data('data-stream') === true
            }).addClass('online')

也不是:

 $("#results .item").find("[data-stream='true']")

必须有一个非常简单的方法来做到这一点，使用 jQuery 或 JS 有什么建议吗？

Answer 1

您的 $("#results .item").find("[data-stream='true']") 非常接近，但它寻找具有该属性的元素作为 .item 元素的后代。您想要查找 它们自己 具有该属性和值的 .item 元素:

$("#results .item[data-stream='true']")

请注意 .item 和 [data-stream='true'] 之间没有空格。这是一个复合选择器。

或者如果您有理由像find一样单独执行它们，请使用filter而不是find (但前提是您有理由将这两个方面分开):

// If you have reason to separate the two aspects
$("#results .item").filter("[data-stream='true']")

复合选择器的实例:

var target = $('#result')

target.prepend('<div data-stream="true" class="item ">This is the true one</div>');
target.prepend('<div data-stream="false" class="item ">This is the false one</div>');

console.log("Turning the true one blue with a class");
$("#result .item[data-stream='true']").addClass("foo");

.foo {
  color: blue;
}

<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

旁注:您的部分问题使用 id result，其他部分使用 results。您会希望它们匹配。