基于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>

我如何在$(document).ready(function(){})使用以下html更改基于data-uid attr值的上述代码a选择器：

'<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

您可以使用属性选择器来获取具有特定属性值的元素。

$('[data-uid="yourvalue"]')

Answer 2

这可能是您要寻找的：

$(document).ready(function(){
    $('a[data-uid="date"]').parent().html('<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>');
});

那会产生这个：

<div id="review_sort_section" class="ieSucks"> 
   <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>               
</div>

在这里，您有一个由@mplungjan添加的生动示例： http : //jsfiddle.net/mplungjan/89ZhX

Answer 3

这可能对你有用

$('a[data-uid="yourValue"]').attr('class','your-class-name').html('<i class="i ig-common i-sort-descend-common"></i>Date');

Answer 4

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

演示

$(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的：

演示

$(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
    });
}); 

Answer 5

尝试这样。 使用属性选择器属性等于选择器

$('a[data-uid="yourValue"]');