How to target div at the end of the row?

Question

I am trying to insert a box strip in between rows of divs, how can I target the end of each row\'s div?

Here\'s a JSFiddle of the divs: http://jsfiddle.net/5Sn94

Answer 1

Using jQuery, you can use the last-child selector: http://jsfiddle.net/5Sn94/1/

Answer 2

You can use document.getElementsByTagName but it will only work if you don't have any other divs on the page http://jsfiddle.net/5Sn94/2/

var divs = document.getElementsByTagName('div');
divs[divs.length-1].style.border = '1px solid red';

Answer 3

I think this can help you in your investigations:

div {
    display: inline-block; // <-- use display: inline-block instead of float: left
    margin: 0 15px 0 0;
    cursor: pointer;
}
.expander {
    background: coral;
    height: 100px;
    width: 100%;
    margin-bottom: 6px;
    float: left; // <-- this float makes the trick
}

http://jsfiddle.net/5Sn94/14/

.expander is a div which needs to be inserted after target (hovered in my example) element. It has 100% width to occupy whole horizontal space.

To insert expander after hovered div I used this javascript (inside for loop):

div[i].onmouseover = function() {
    d.innerHTML = 'Details about div #' + this.dataset.id;
    this.parentNode.insertBefore(d, this.nextSibling).style.display = 'block';
}

You can insertAfter in jQuery, etc.