Question

I am working on a custom Tumblr HTML template. Within each post (= li including class “post”) I want to hide a div that includes the class “callToAction” but only if the post contains a tag with the name “#id-Original”.

What I tried so far this CSS to hide the call to action div by default

.callToAction {
display:none;
}

And then this JQuery statement to show the call to action if a post contains the “id-Original” tag.

if ($('#id-Original')) {
  $('#id-Original').closest('li.post').css('background-color', '#005580');
  $('#id-Original').closest('.callToAction').css('display', 'block');
}

→ Current Problem: while the background color changes based on the tag. The Call to Action div always stays hidden.

The HTML (excerpt of 2 posts, one with a “id-Original” tag and one without)

              <li class="post photo textcentered">
                    <div class="row">
                        <div class="span12 textcentered">
                        ...
                        </div>
                    </div>
                    <div class="row">
                        <div class="span12 addSpaceAtTop photocaption">
                            <p>Week #1 [Non-Original]</p>
                            <ul class="tags">
                                    <li>
                                        <a href="..." id="id-Weekly">Weekly</a>
                                    </li>
                             </ul>                
                        </div>
                        <div class="span12 addspace callToAction">
                            <p><a class="addspaceright" href="...">Download Original Size</a> <a class="btn" href="/submit">Upload Your Version</a>
                            </p>
                        </div>
                    </div>  
                </li>

                <li class="post photo textcentered">
                    <div class="row">
                        <div class="span12 textcentered">
                            ...
                        </div>
                    </div>
                    <div class="row">
                        <div class="span12 addSpaceAtTop photocaption">
                            <p>Week #2 [Original]</p>
                            <ul class="tags">
                                    <li>
                                        <a href="..." id="id-Original">Original</a>
                                    </li>
                                    <li>
                                        <a href="..." id="id-Weekly">Weekly</a>
                                    </li>
                             </ul>                
                        </div>
                        <div class="span12 addspace callToAction">
                            <p><a class="addspaceright" href="...">Download Original Size</a> <a class="btn" href="/submit">Upload Your Version</a>
                            </p>
                        </div>
                    </div>  
                </li>

Answer 1

var $deepSelector = $('li.post ul.tags');

$deepSelector.each(function() {

    if ($('li a#id-Original', this).length) {
        $(this)
               .closest('li.post')
               .css('background-color', '#005580')
               .find('div.callToAction')
               .css('display', 'block');
    }

});

WORKING DEMO