Select first/last half of a group of spans

Question

I have this table-like structure in my code. Is there a pretty way to select the first 'half' of the spans contained within the div?

<div> 
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

I could do the typical div - children, then count and divide by two. But I was wondering if there was a selector based on a child interval position. Like .find("span[0-4]")

There are many pretty and ugly ways. Which one have you tried? — emerson.marini, Apr 11 '15 at 16:41
possible duplicate of [jQuery split long ul list in smaller lists](http://stackoverflow.com/questions/1644668/jquery-split-long-ul-list-in-smaller-lists) — karthikr, Apr 11 '15 at 16:42
I explained a little bit more thorough what I was looking for. — Gleiemeister 2000, Apr 11 '15 at 16:47

score 3 · Accepted Answer · answered Apr 11 '15 at 16:45

I'd suggest using the .slice() method. Retrieve the total number of span elements by accessing the .length property, and then divide that in half:

var $el = $('div span');
$el.slice(0, Math.ceil($el.length / 2)).addClass('half');

div span {
    display: inline-block;
    height: 20px;
    width: 100%;
    border: 2px solid;
}
.half {
    border: 2px solid #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> 
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

In order to access the last half, use either of the following instead:

$el.slice(Math.ceil($el.length / 2), $el.length)

$el.slice(-Math.ceil($el.length / 2))

Select first/last half of a group of spans

1 Answers1