data-のカスタム属性に対してtoggleClassしたかったんだけどやり方がわからなかった

環境

jQuery v2.1.4
Google Chrome

やりたいこと

よくECサイトで商品のレビューに☆が５つあって、該当する星を塗るという項目があるが、これをjQueryで実装してみた。

クリックした場所をdata-starで取得して、
それより低い数値のliに「glyphicon-star」(★)を、そうではないliに「glyphicon-star-empty」(☆)をセットしようと考えてみたが、他のdata-startのset方法がよくわからなかった。

<ul id="stars" class="star_list">
  <li class="glyphicon glyphicon-star-empty" data-star="1"></li>
  <li class="glyphicon glyphicon-star-empty" data-star="2"></li>
  <li class="glyphicon glyphicon-star-empty" data-star="3"></li>
  <li class="glyphicon glyphicon-star-empty" data-star="4"></li>
  <li class="glyphicon glyphicon-star-empty" data-star="5"></li>
</ul>

$(function () {
    $('#stars').on("click","li",function () {
        for (var i = 4; i >= 0; i--) {
            if (i < $(this).data("star")|0 ) {
              // 要素の書き方が分からない・・・
              ???.toggleClass("glyphicon glyphicon-star");
            } else {
              ???.toggleClass("glyphicon glyphicon-star-empty");
            }
        }
    });
});

結局、idを振ってattrする方法で実現できたけど、data-に対してクラスをsetする方法ってどうやるんだろう？？