用于检索特定jQuery元素后的内容的HTML选择器

Question

在下面的代码中，我想检索p中font:first元素之后的所有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>
    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>​

因此，结果将是

<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

我应该给你一些我做过的代码，但我不知道如何在某些元素之后获取元素。

有人能给我指路吗？谢谢!

Answer 1

您可以使用nextAll方法来选择该元素的所有后续同级元素。

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

如果要排除第一个字体元素，可以使用filter方法。

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

http://jsfiddle.net/c7VSY/

Answer 2

由于几乎所有的css选择器都受jQuery支持，您可能只需使用同级选择器之后的~，然后使用所有选择器*即可。

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

Answer 3

您可以使用$('.rrp font:first').nextAll()，但它将只返回所有<br>和<font color="#339900">Validity:</font>，因为其他内容不会被选中，因为它们是<p>的一部分。您应该移动元素中的所有文本

修改后的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>​