目标HTML元素（如果属性等于某个值）

Question

I have an HTML template string that prepends some user info to a div for each user from an Ajax call. Each div has a data-stream attribute with either false or true values.

I want to target the element using JS or jQuery and use CSS or addClass on it if the value is true.

Maybe display a green icon if the value is true and a red one if 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>')

My attempts

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

that doesn't work, nor does:

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

nor:

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

There has got to be a pretty simple way to do this, any suggestions using jQuery or JS ?

Answer 1

Your $("#results .item").find("[data-stream='true']") was really close , but it looks for items with that attribute as descendants of the .item elements. You want to look for .item elements that themselves have that attribute and value:

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

Note no space between .item and [data-stream='true'] . It's a compound selector.

Or if you have reason to do them separately as with your find , use filter rather than find (but only if you have a reason to separate the two aspects):

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

Live Example of the compound selector:

 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> 

---

Side note: Part of your question uses the id result , and other parts use results . You'll want those to match.

Answer 2

You can use only CSS, targeting data-stream attribute's value:

UPDATE: Use :before to place an icon depending on the the data attribute

 .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

When you want Javascript to Manipulate unique DOM elements you should always use IDs on those elements in order to be easily accessible.

Change your code to something like this :

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

and Access the element later using those IDs :

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

Addition :

Checking your question again , i noticed that you are not after Unique document elements (or want to manipulate a very specific one) but after a group of elements. My first answer is not suited for your case.

TJ Crowder proposal is suited for your case.