Question

I think I’ve almost got it, but not there quite…

I want to select the a.rate-button out of this HTML only when an element one level up and two levels down in the DOM contains a certain string. I know that this is stretching the limits of a jQuery selector but it’s just for fun and not production.

HTML:

<div class="comment">

    <div class="submitted">
        <a href="#" title="View user profile.">Blow, Jo</a>  
    </div><!-- CLASS submitted -->

    <div class="content">
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
  </div><!-- CLASS content -->

      <ul class="links">
        <li class="comment_delete first"><a href="/comment/delete/1204">delete</a></li>
            <li class="comment_edit"><a href="/comment/edit/1204">edit</a></li>
            <li class="flag_content_add">hippo</li>
            <li class="rate_thumbup_comments last">
                <span>
                    <div class="rate-widget-1 rate-widget clear-block rate-average">
                        <a class="rate-button" rel="nofollow" href="#">up</a>
                        <div class="rate-info">1 person likes this.</div>
                    </div>
                </span>
            </li>
        </ul>

</div>

The jQuery selector I’ve got thus far:

$('.submitted a:contains("Blow")').parent().parent().next('.links .rate_thumbup_comments .rate-widget').find('a').css('display', 'none');

So, to reiterate: I want to select the tag inside div.rate-widget which is inside li.rate_thumbup_comments only when container div.submitted has an with a string inside it of “Blow”. All of this is within the container div.comment

Answer 1

This seems to work with the html you provided:

$('.submitted a:contains("Blow")').parent().parent().children('.links').find('.rate-button').css('display', 'none');