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

Question

我有一个HTML模板字符串，它为每个用户从一个Ajax调用将一些用户信息转换成一个div。每个div都有一个带有false或true值的data-stream属性。

如果element为真，我希望使用JS或jQuery锁定目标，并在其上使用CSS或addClass。

如果值为true，则可能显示绿色图标；如果值为false，则显示红色图标。

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。你会想要匹配的。

Answer 2

您只能使用CSS，针对数据流属性值：

更新：使用: the根据数据属性放置图标

​

.item:before {
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   display: inline-block;
   text-decoration: inherit;
   margin-right:5px;
}
.item[data-stream="true"]:before {
   content: "\f00c";
   color: green;       
 } 
.item[data-stream="false"]:before {
   content: "\f00d";
   color:red;
 } 

<div data-stream="true" class="item ">True</div>
<div data-stream="false" class="item ">False</div>
<div data-stream="true" class="item ">True</div>
<div data-stream="true" class="item ">True</div>
<div data-stream="false" class="item ">False</div>
<div data-stream="false" class="item ">False</div>

​

Answer 3

当您希望Javascript操作唯一的DOM元素时，应该始终对这些元素使用in，以便便于访问。

将代码更改为如下内容：

target.prepend('<div id="YOUR_INIQUE_ID" 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>')

并在以后使用这些ID访问元素：

jQuery('#YOUR_INIQUE_ID').css('display','none');

加法:

再次检查您的问题时，我注意到您不是在唯一的文档元素(或希望操作非常特定的文档元素)之后，而是在元素的组之后。我的第一个回答不适合你的情况。

T.J.克劳德方案适合你的情况。