Target Html Element If Attribute Equals A Certain Value

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

Solution 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;
}

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

---

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

Solution 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;
 } 

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

Solution 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('<divid="YOUR_INIQUE_ID"data-stream="' + userObj.stream + '"class="item "><atarget="_blank"href="' + userObj.url + '"><imgclass="logo"src="' + userObj.logo + '"/><spanclass="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.

T.J. Crowder proposal is suited for your case.