jquery - HTML5 数据 block 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 函数上下文你应该使用 this 它指的是当前元素而不是 $('.summary-item') 你应该编码 data(' block-json')，而不是 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/