javascript - 基于attr的jquery改变选择器

Question

我有以下 html 片段:

<div id="review_sort_section" class="ieSucks">Sort by:    
    <a href="#" data-uid="date">Date</a>    
<a href="#" data-uid="rating">Rating</a> 
    <a href="#" data-uid="vote">Vote</a>        
</div>

如何根据 data-uid 的 attr 值更改上述代码的 a 选择器，在 中使用以下 html $(文档).ready(函数(){}):

'<a href="#"  class="i-wrap ig-wrap-common i-sort-descend-common-wrap ig-wrap-common-r selected">' + 
            '<i class="i ig-common i-sort-descend-common"></i>Date</a>';

Answer 1

这是对您问题的尽可能准确的实际答案 - 我怀疑您想将 DATE 包装在 I 中

DEMO

$(function() {    
  $('#review_sort_section a[data-uid="date"]')
    .addClass("i-wrap ig-wrap-common i-sort-descend-common-wrap ig-wrap-common-r selected")
    .html('<i class="i ig-common i-sort-descend-common">Date</i>');
});

结果:

<div id="review_sort_section" class="ieSucks">Sort by:    
  <a href="#" data-uid="date" class="i-wrap ig-wrap-common i-sort-descend-common-wrap ig-wrap-common-r selected"><i class="i ig-common i-sort-descend-common">Date</i></a>    
  <a href="#" data-uid="rating">Rating</a> 
  <a href="#" data-uid="vote">Vote</a>        
</div>

---

假设 - 您可能需要此代码:

HTML:

<div id="review_sort_section" class="ieSucks">Sort by:    
  <a href="#" data-uid="Date">Date</a>    
  <a href="#" data-uid="Rating">Rating</a> 
  <a href="#" data-uid="Vote">Vote</a>        
</div>

jQuery:

DEMO

$(function() {
    $("#review_sort_section a").on("click",function(e) {
        e.preventDefault();
        $(this).addClass("i-wrap ig-wrap-common i-sort-descend-common-wrap ig-wrap-common-r selected")
          .html('<i class="i ig-common i-sort-descend-common">'+$(this).data("uid")+'</i>')
          .siblings().each(function() {
            $(this).html($(this).data("uid")).removeClass(); // siblings $(this)
          });

        // here we call the ajax to load the sorted data
    });
});