1

Say I've got something like:

Paragraph One
<br>
<br>
Paragraph Two
<br>
<br>
Paragraph Three
<br>
<br>
Paragraph Four
<br>
<br>
Paragraph n
<br>
<br>

Is there a jQuery selector that I should be using to target everything from Paragraph two to paragraph n? Once I figure out how to target those paragraphs, I want to set them to hidden.

EDIT: When I mention paragraphs above, I mean to say a paragraph block of text. Not using any p elements currently.

2
  • 1
    When you say "paragraph" are you actually using p elements that are not shown in the code in your question? Jan 25, 2012 at 20:01
  • 1
    Good question. I just meant paragraph blocks of text. We're currently not using any p elements in our markup currently. I think we might based off of @wheresrhys's solution below.
    – bob_cobb
    Jan 25, 2012 at 20:06

3 Answers 3

4

You should be marking up the text as

<p>par 1</p> 
<p>par 2</p>

Then you can use

$("p:gt(0)").hide();

Using the markup you have there's no easy way to achieve it (with jQuery at least) as jQuery has no selector that matches text nodes, which is what you're trying to hide.

*edit If you specifically want to stop at n then use (for example if n = 7)

$("p:lt(7):gt(0)").hide();
1
  • Yeah, I had a feeling that it would be pretty difficult with this current markup, but I think we are keeping it that way atm. I'll check into possibly changing it, but I'm not sure if it'd be as simple as just changing it for this case, unfortunately. Thanks for the markup. I'll use this in the future, should we decide to go that route.
    – bob_cobb
    Jan 25, 2012 at 20:11
2

this is what the jquery .slice() method was designed for.

Given a jQuery object that represents a set of DOM elements, the .slice() method constructs a new jQuery object from a subset of the matching elements. The supplied start index identifies the position of one of the elements in the set; if end is omitted, all elements after this one will be included in the result.

so

$('p').slice(3,6).addClass('the-class');
//note Zero Based indexing. Plus it wont include the last element.

live example: http://jsfiddle.net/t9Nmy/

NOTE -- addClass was to help visualize it, .hide(), .fadeOut(), etc may be what youre after

you could also combine the :gt() and :lt() selectors as follows

$('p:lt(6):gt(3)').addClass('the-class');

or just

$('p:gt(2)').hide()

10
  • This is exactly what I was looking for. Thanks. Would rather not have to change the structure of the html at this point per @wheresrhys's suggestion above. Thanks for the demo as well.
    – bob_cobb
    Jan 25, 2012 at 20:10
  • i'm glad this helps. The example was sort of laying around. This question was pretty similar to another I have answered here stackoverflow.com/questions/6247354/jquery-id-number-range/…
    – matchew
    Jan 25, 2012 at 20:11
  • In your :gt(3):lt(19) example you have :gt and :lt the wrong way round. If :gt is first, elements from the start of the matched set are removed so later elements end up with a lower index when :lt runs next. Jan 25, 2012 at 20:12
  • I'm afraid the code above also won't work unless you change the html. The jsfiddle given contains multiple <p> tags. Here's an example without them which doesn't work jsfiddle.net/UUJg9
    – wheresrhys
    Jan 25, 2012 at 20:13
  • @James_Allardice That'd be true if he was doing $('p').gt(3).lt(19), but I don't think it holds if they're part of the initial selector
    – wheresrhys
    Jan 25, 2012 at 20:15
0

You can use , :ep()Selector to target the index number.

For example in your case it may be something like this

$("br:eq(3)")

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.