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>

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

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

您可以使用attribute selector获取具有特定属性值的元素。

$('[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包装在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
    });
});

Answer 5

试试这样。使用属性选择器Attribute equals selector

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

基于attr的Jquery更改选择器

5 个答案: