Shuffle 12 <li> elements from <ul> excluding 3 elements from the list

Question

I would like to show from the list 12 <li> elements, shuffle them and keep the rest hidden. To did it I have used shuffle.js and it works perfectly, I used as well those few lines to hide the rest of the elements:

$('ul.small-block-grid-4').each(function(){

  var max = 11
  if ($(this).find('li').length > max) {
    $(this)
      .find('li:gt('+max+')')
      .hide()
      .end()
  }

}

Okey, so what's the problem?

The problem is that, inside this list are square pictures and 4 tiles that I would like to rotate as well as the pictures (let them change place inside selected 12), but have them still in selected area.

I would appreciate if someone could suggest me idea how can I do this.

JSFiddle

Answer 1

Here is a suggestion JSFiddle

I just selected all the a href elements and the called their parent:

$('ul.small-block-grid-4 li a').parent().shuffle();

so it would apply only to the li elements that have an anchor tag as child.

Also you could accomplish this by adding a specific class to those elements you want to shuffle like ".shuffable" and then call the .shuffle() method on this elements:

$('ul.small-block-grid-4 li.shuffable').shuffle();

Answer 2

Thank you for you answer, your solution will be perfect if I wanted tiles to stay in the same place. But as I wrote I would like them to change their place, but still in the area of 12 other images.

I wrote smg like that:

$('ul.small-block-grid-4 li').shuffle();

$('ul.small-block-grid-4').each(function(){
  var max = 8
  var tile = 3
  if ($(this).find('li').length > max) {

  $(this).find('li:gt('+max+')').hide().end()

  if ($('ul.small-block-grid-4 > li:gt('+max+')').find('li.tile').length < tile) {
      $('li.tile').show().end()
  }

  }
}); 

It works in the meaning that those 4 tiles are still in the area of 12 when refresh and change their place in this area, but another problem occur with this solution. Whole structure of that list is break :(

Any other suggestions?