2012-05-06 3 views
1

Я работаю над настраиваемым HTML-шаблоном Tumblr. Внутри каждого сообщения (= li включая класс «post») я хочу скрыть div, который включает класс «callToAction» , но только если сообщение содержит тег с именем «# id-Original».Условное отображение div в сообщении, если существует определенный тег

То, что я пытался до сих пор этот CSS, чтобы скрыть призыв к действию DIV по умолчанию

.callToAction { 
display:none; 
} 

А потом это заявление JQuery, чтобы показать призыв к действию, если сообщение содержит «ID-Original» тег.

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

→ Текущая проблема: в то время как изменения цвета фона на основе тега. Призыв к действию div всегда остается скрытым.

HTML, (отрывок из 2-х сообщений, один с "ID-оригинала" метки и один без)

   <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> 
+1

'если ($ ('# id-Original ')) 'всегда будет правдой! то же, что и 'if ($ ('Nothing bla doesntExist input.class Dont need it'))' ... – gdoron

ответ

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

1
$('#id-Original').closest('.callToAction').show().css('display', 'block'); 
Смежные вопросы