1

我有以下 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>

如何根据以下 html 的值更改a上述代码的选择器：attrdata-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>';
4

5 回答 5

2

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

$('[data-uid="yourvalue"]')
于 2013-03-06T12:33:39.103 回答
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

于 2013-03-06T12:34:32.940 回答
2

这可能对你有用

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

于 2013-03-06T12:38:52.950 回答
2

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

演示

$(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
    });
});
于 2013-03-06T12:45:44.907 回答
1

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

$('a[data-uid="yourValue"]');
于 2013-03-06T12:34:00.513 回答