title: Change each list item background color conditionally JQuery Mobile
body: <p>I have developed an Android app, which consists in a listview of items populated from strings, which changes the color of each list row depending on a word coincidence.</p>
  
  <p>Now i'm trying to develop same app, for the web. After being investigating, the best way I did found, was using JQuery Mobile.</p>
  
  <p>So, now I want to accomplish the same, a ListView that conditionally changes each list item background-color conditionally.</p>
  
  <p>After several days investigating and learning, I'm populating the list from a JSON, <a href="http://jsfiddle.net/52Haa/394/" rel="nofollow noreferrer"><strong>like you can see here in JSFiddle</strong></a> (This is what I've achieved until now, based on another JSFiddle I did found, because I had never used JQuery Mobile.)</p>
  
  <pre><code>//JSON goes above here
  
  $(document).on("pageinit", "#info-page", function () { 
  //set up string for adding &lt;li/&gt;
  var li = "";
  //container for $li to be added
  $.each(info, function (i, name) {
      //add the &lt;li&gt; to "li" variable
      //note the use of += in the variable
      //meaning I'm adding to the existing data. not replacing it.
      //store index value in array as id of the &lt;a&gt; tag
      li += '&lt;li&gt;&lt;a href="#" id="' + i + '" class="info-go"&gt;' + name.Número + '&lt;p&gt;' + name.Origen + '&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;';'&lt;/a&gt;&lt;/li&gt;';
  });
  //append list to ul
  $("#prof-list").append(li).promise().done(function () {
      //wait for append to finish - thats why you use a promise()
      //done() will run after append is done
      //add the click event for the redirection to happen to #details-page
      $(this).on("click", ".info-go", function (e) {
          e.preventDefault();
          //store the information in the next page's data
          $("#details-page").data("info", info[this.id]);
          //change the page # to second page. 
          //Now the URL in the address bar will read index.html#details-page
          //where #details-page is the "id" of the second page
          //we're gonna redirect to that now using changePage() method
          $.mobile.changePage("#details-page");
      });
  
      //refresh list to enhance its styling.
      $(this).listview("refresh");
  });
  });
  
  //use pagebeforeshow
  //DONT USE PAGEINIT! 
  //the reason is you want this to happen every single time
  //pageinit will happen only once
  $(document).on("pagebeforeshow", "#details-page", function () {
      //get from data - you put this here when the "a" wa clicked in the previous page
      var info = $(this).data("info");
      //string to put HTML in
      var info_view = "";
      //use for..in to iterate through object
      for (var key in info) {
          //Im using grid layout here.
          //use any kind of layout you want.
          //key is the key of the property in the object 
          //if obj = {name: 'k'}
          //key = name, value = k
          info_view += '&lt;div class="ui-grid-a"&gt;&lt;div class="ui-block-a"&gt;&lt;div class="ui-bar field" style="font-weight : bold; text-align: left;"&gt;' + key + '&lt;/div&gt;&lt;/div&gt;&lt;div class="ui-block-b"&gt;&lt;div class="ui-bar value" style="width : 75%"&gt;' + info[key] + '&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
      }
      //add this to html
      $(this).find("[data-role=content]").html(info_view);
  });
  </code></pre>
  
  <p><strong>So, basically what I want is to change (if it is possible) the colour of each row, depending of the  of the word under the row title</strong> (or any other variable I could include in the JSON, would only be three variables):
  This is what i have in Android, just to clarify what I want:</p>
  
  <pre><code>if (additiveslist.get(position).getOrigen().equals("Vegano")) {
          holder.relativeLayout.setBackgroundColor(0xB790D55D);
              }
  
      if (additiveslist.get(position).getOrigen().equals("Dudoso")) {
          holder.relativeLayout.setBackgroundColor(0x96F6B22D);
      }
      if (additiveslist.get(position).getOrigen().equals("No vegano")) {
          holder.relativeLayout.setBackgroundColor(0x84f51000);
  
  
  
      }
  </code></pre>
  
  <p>And this is how it looks like on Android App:</p>
  
  <p><img src="https://i.stack.imgur.com/sfxzv.png" alt="This is how it looks like on Android App"></p>
  
  <p>Hope I explained well and someone can help me, because I am a complete beginner in JQuery Mobile (or maybe I did wrong choosing JQuery Mobile to do this kind of web app...)</p>