Change "data-icon" dynamicly doesn't work

Question

According to myself, this should work.... Trying to change icon on a list view item inside a collapsible / collapsible-set

var p = $("#mySet li[data-item='"+ item + "'][data-bin='"+ bin + "']").attr("data-icon");

If I alert(p), i get "carat-r", wich is the icon.

But applying this does nothing:

$("#mySet li[data-item='"+ item + "'][data-bin='"+ bin + "']").attr("data-icon", "check");

Any ideas?

Update: The markup changes, actually (using firebug), so there seems to be some refresh issue?

Update 2, thanks to Omar - Works now!

$("#mySet li[data-item='"+ item + "'][data-bin='"+ bin + "'] a").removeClass("ui-icon").addClass("ui-icon-check");

Answer 1

List view items accommodate <a> tags which hold icons. data-icon attribute is deprecated and replaced with icon classes to be added directly into <a> tags.

However, in list view items, icon classes are added once list view is created. To change icon of a li, you need to add it directly into li's anchor.

$("li a").addClass("ui-icon-check");

Moreover, you need to remove previous icon's class. It can be done programmatically this way.

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

This will remove current icon and replaces it with ui-icon-check.

Demo