Is there a way to target the first and last element in each row using jQuery isotope?

Question

I have an masonry isotope grid that has n number of rows with two column sizes: 160px by 160px and 320px by 320px and I'd like to assign different styles to the first and last element of each row. My rows could have anywhere from 4 elements to 7 elements. I've been struggling with this for a bit, and wondering if it's possible. HTML ```

Accepted Answer

Here's one way to approach the problem.

Working Solution: http://jsbin.com/ufuleb/21/

CSS

```
.first, .last {
  border:2px dashed blue;
  opacity:.75;
}
```

JavaScript

```
$("#grid").isotope(
    { layoutMode : 'fitRows' });

// Last div element
$("#grid div:last-child").addClass("last");

var maxWidth = 0;

// Use max to handle last div
$("#grid div").each(function (i) {  
  matrix = matrixToArray($(this).css("-transform"));

// identify first elements
  if ( parseInt(matrix[4],10) == 0 ) {
    $(this).addClass("first");
  }

// identify last elements
  if ( parseInt(matrix[4],10) > parseInt(maxWidth,10) ) { 
    maxWidth = matrix[4];
  } else {      
    $(this).prev().addClass("last");
    maxWidth = 0;
  } 
});

// Util function for parsing -webkit-transform
function matrixToArray(matrix) {    
    return matrix.substr(7, matrix.length-8).split(', ');
}
```

Loop through each `div` and track the current `xT` value (CSS -webkit-transform). Whenever the maximum value is passed, just update the previous value which should be the last element of each row. The very last element is handled with `:last-child`. Note that this solution also handles the overall `#grid` width changing.

Example Output

This could probably be optimized further but at least provides a starting point.

I got some help from this answer: https://stackoverflow.com/a/5968313/1085891

For reference:

- https://developer.mozilla.org/en-US/docs/CSS/:last-child

- https://developer.mozilla.org/en-US/docs/CSS/:first-child

- https://developer.mozilla.org/en-US/docs/CSS/:nth-child

Is there a way to target the first and last element in each row using jQuery isotope?

Solution

Problem

Related problems