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函数上下文中，您应该使用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/

Answer 2

尝尝这个

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