jquery - HTML5 数据块 JSON

Question

好的，所以这段代码：

<div class="summary-block" data-block-json="{"pageSize":4,"acceptTypes":["gallery","blog","projects","calendar"]}">

我正在尝试使用一些 jQuery 来完成这样的事情：

$(".summary-block").data('block', 'pageSize').each(function() {

  $('.summary-item').wrap('<div class="col sqs-col-3 span-3"></div>');
  $('.col > .summary-item').wrap('<div class="newSummary"></div>');

});

现在代码可以 100% 工作，但就我要询问的内容而言，不是 100%。我怎样才能使它像这样：

$(".summary-block").data('block', 'pageSize':4).each(function() {

  $('.summary-item').wrap('<div class="col sqs-col-3 span-3"></div>');
  $('.col > .summary-item').wrap('<div class="newSummary"></div>');

});

请注意 :4 这必须以某种方式包含在我的代码中。请帮忙。谢谢！

Answer 1

您不过滤元素，您只是设置新data属性，而不是选择具有特定data属性的元素，同样在您的each函数上下文中您应该使用thiswhich 引用当前元素 not$('.summary-item')并且您应该编码data('block-json'), not data('block')。你可以使用filter方法。

<div class="summary-block" data-block-json='{"pageSize":4,"acceptTypes":["gallery","blog","projects","calendar"]}'>...</div>

var $elems = $('.summary-block').filter(function(){
    return $(this).data('block-json').pageSize === 4
})

$elems.each(function(){
    $('.summary-item', this).wrap('<div class="col sqs-col-3 span-3"></div>');
    // or $(this).find('.summary-item')....
})

http://jsfiddle.net/xw2vN/

Answer 2

试试这个

$(".summary-block").data('block', 'pageSize').where('pagesize' , 4 ).each(function() {