HTML5 Data-block JSON

Question

Okay so this code:

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

I'm trying to use some jQuery to accomplish something like this:

$(".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>');

});

Now the code works 100%, but not 100% in terms of what I'm trying to ask it. How can I make it so its like:

$(".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>');

});

Notice the :4 this must be included somehow in my code. Please help. Thanks!

Answer 1

You don't filter the elements, you are only setting new data attributes, not selecting the elements that have specific data attributes, also in your each function context you should use this which refers to the current element not $('.summary-item') and you should code data('block-json'), not data('block'). You can use filter method.

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