CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-selectors
rnk
rnk

Reputation: 2204

jQuery Selector to retrieve contents after certain HTML element

I want to retrieve all the html elements after font:first element inside p in the below code.

<p class="rrp">
    <font color="#ff6600">
        <strong>
            Save 20% on in-house Frames and Sunglasses
            <br>
            Save 10% on Contact Lens and Branded Frames
            <br>
            Ask at the counter for more details
        </strong>
    </font>
    <br>
    GKB Opticals, Shop No. EB-GF-10, Block East, Ground Floor, Town Centre - Amanora Mall, Amanora Park Township, Village Sadesatranali (17-1/2 Nali), Hadapsar, Taluka Haveli,
    <br>Pune - 411 028.
    <br>
    <font color="#339900">Validity:</font>
     31st March 2013
</p>​

So, the result would be

<br>
GKB Opticals, Shop No. EB-GF-10, Block East, Ground Floor, Town Centre - Amanora Mall, Amanora Park Township, Village Sadesatranali (17-1/2 Nali), Hadapsar, Taluka Haveli,
<br>Pune - 411 028.
<br>
<font color="#339900">Validity:</font>
 31st March 2013

I should give you some code I've done, but I have no idea how to fetch the elements after certain element.

Could anyone guide me? thanks!

Upvotes: 1

Views: 126

Answers (5)

Shaoz
Shaoz

Reputation: 10653

You can just use: $('.rrp font:first').nextAll(). But as @Shsul said, only elements surrounded with a tag will get selected, not the text only.

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382132

If what you want to do is to get a copy of your .rrp content without the first font element and everything before, you can do this :

var $rrp = $('.rrp').clone();
$rrp.find(':lt('+($rrp.find('font:first').index()+1)+')').remove();
var $rrpContent = $rrp.html();

$rrp in this case contains also the text nodes.

But the code you need really depends on your use case. Is that for cleaning ?

Upvotes: 0

Anoop
Anoop

Reputation: 23208

You can use $('.rrp font:first').nextAll() but it will return all <br> and <font color="#339900">Validity:</font> only, as other content will not get selected as they are part of <p> you should move all text inside a element

Modified html:

    <p class="rrp">
        <font color="#ff6600">
            <strong>
                Save 20% on in-house Frames and Sunglasses
                <br>
                Save 10% on Contact Lens and Branded Frames
                <br>
                Ask at the counter for more details
            </strong>
        </font>
        <br>
        <div>GKB Opticals, Shop No. EB-GF-10, Block East, Ground Floor, Town Centre - Amanora Mall, Amanora Park Township, Village Sadesatranali (17-1/2 Nali), Hadapsar, Taluka Haveli,
        <br>Pune - 411 028.
        <br>
 </div>
        <font color="#339900">Validity:</font>
         <div>31st March 2013</div>
    </p>​

Upvotes: 0

Ram
Ram

Reputation: 144689

You can use nextAll method which selects all following siblings of the element.

$('.rrp font:first').nextAll()

If you want to exclude the first font element, you can use filter method.

var $ff = $('.rrp font:first')
$('.rrp').contents().filter(function(){
    return !$(this).is($ff)
})

http://jsfiddle.net/c7VSY/

Upvotes: 2

Nate Higgins
Nate Higgins

Reputation: 2114

Since pretty much all css selectors are supported by jQuery, you can probably just use the after-sibling selector, ~, followed by the all selector, *.

$('.rrp font:first ~ *')

Upvotes: 0

Related Questions