jQuery how to select elements not being .first() or .last()

Question

I've got this code

        <ul>
            <li><a href="index.php">Web Development</a></li>
                <span data-landing_count="1">
                    <li class="subli"><a href="1.html">E-shop</a></li>
                    <li class="subli"><a href="2.html">Prezentations</a></li>
                    <li class="subli"><a href="3.html">Custom CMS</a></li>
                    <li class="subli"><a href="4.html">WordPress & Joomla!</a></li>
                    <li class="subli"><a href="5.html">Web apps</a></li>
                    <li class="subli lastsl"><a href="index-b.html">Design</a></li>
                </span>
            <li><a href="6.html">E-courses</a></li>
                <span data-landing_count="2">
                    <li class="subli"><a href="7.html">Design & Graphics</a></li>
                    <li class="subli lastsl"><a href="8.html">Web Development</a></li>
                </span>
            <li><a href="9.html">SEO</a></li>
                <span data-landing_count="3">
                    <li class="subli"><a href="91.html">On-page SEO</a></li>
                    <li class="subli"><a href="92.html">W3C validation</a></li>
                    <li class="subli"><a href="93.html">Linking</a></li>
                    <li class="subli lastsl"><a href="94.html"><img src="img/star.png" alt="star" width="12" class="star">Copywriting</a></li>
                </span>
            <li data-landing_count="4"><a href="95.html">Web hosting</a></li>
            <li data-landing_count="5"><a href="96.html"><img src="img/star.png" alt="star" width="12" class="star">Pricing</a></li>
            <li data-landing_count="6"><a href="97.html">Contact us</a></li>
        </ul>

There are 3 spans, I now i can target the first one by .first() and the last one with .last(). But how do I target the middle one?

Thanks for reply

Answer 1

You could use:

$('span').eq(1);

Using the eq() method, or the selector:

$('span:eq(1)');

Or:

$('span').slice(1,-1);

Note that your HTML is invalid, though: the only element that can wrap li elements is a ul or an ol.

References:

• eq().
• :eq selector.
• slice().

Answer 2

$('ul span').not(':first,:last');

jsFiddle Demo

Please note that your HTML is absolutely broken. You should learn HTML first, because this will only lead to mysterious problems and downvoted StackOverflow questions.

li can only be the child of an ul or ol. Also, ul and ol can only have lis as their children. You cannot place spans in HTML the way you are doing it.

Answer 3

You can fix it with:

.eq(1)

it should work.

And if you want to take all elements you can use for when you iterate from secound on to pre-end element;

Answer 4

Firstly, your HTML is BAD. Don't put <span> tags in between <li> tags. Only going to end in disaster.

Secondly, are you targeting these in order to provide different styles? If so, then why not make use of the css :first-child and :last-child selectors. That way you can style the first and last rather than those in between.