How to change the icon of a listview item

Question

I have the following markup:

<ul id="menu" data-role="listview">
    <li><a href="/">Home</a></li>
    <li class="label"><a href="#">About</a></li>
    <li><a href="/">About Us</a></li>
    <li><a href="/">Contact Us</a></li>
    <li class="label"><a href="#">More</a></li>
    <li><a href="/">FAQs</a></li>
    <li><a href="/">Terms</a></li>
</ul>

How do I change the icon of all label element from > to +? I tried:

$(".label").buttonMarkup({ icon: "plus" });

Which worked in v1.3.0 but produces unexpected results in v1.4.0.

Answer 1

Update

I just realized that you want to change icon for elements with label class.

You first need to remove old class that starts with ui-icon- and then add ui-icon-plus.

$(".label a").removeClass(function (i, uiClass) {
  return (uiClass.match(/\bui-icon-\S+/g) || []).join(' ');
}).addClass("ui-icon-plus");

Demo

---

Using .buttonMarkup() isn't correct, it's meant to be used with anchors only. Anyway, that function is deprecated and will be removed on 1.5.

The below is the correct way to do changes to listview widget.

$(document).on("pagebeforecreate", function () {
  $("#menu").listview({
    icon: "plus"
  });
});

Demo