與遍歷

Question

相鄰的選擇我都在那裏，我使用，我自己建了流體網格的情況。這些是我正在處理的兩種內容類型的父母：.media-tile和.blurb-tile。

我已刪除多餘的標記是不相關的這個問題，但我的標記基本上是這樣的：

<div class="row"> 
    <div class="three columns"> 
    <div class="media-tile"> 
     <!-- content --> 
    </div><!-- END .media-tile --> 
    </div><!-- END .three.columns --> 
</div><!-- END .row --> 
<div class="row"> 
    <div class="twelve columns"> 
    <div class="blurb-tile"> 
     <!-- content --> 
    </div><!-- END .blurb-tile --> 
    </div><!-- END .twelve.columns --> 
</div><!-- END .row --> 

我的問題是，我必須有.blurb-tile內容塊特定的造型時，內容塊遵循.media-tile（有時不遵循它）。

我認爲加上相鄰選擇以下遍歷方法將工作：

.row .three.columns .media-tile + .row .twelve.columns .blurb-tile { 
    /* my properties here */ 
} 

但是它不...

在這種特定情況下，有選擇，我可以使用隨着遍歷，以創建一個條件類，當我的.blurb-tile內容塊跟隨我的.media-tile內容塊？

任何幫助就這將非常感激。

預先感謝您。

Answer 1

根據您當前的DOM結構是不可能的純CSS（至少在我的CSS知識）。我爲您的需求提供一個jQuery的解決方案：

$(".media-tile") 
 
    .parents(".row") //get ancestors elements with class row 
 
    .next() //get next element(similar to css adjustment selector) 
 
    .find(".blurb-tile") //find element with class blurb-tile 
 
    .css("color", "red");//apply css for test purposes

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="three columns"> 
 
    <div class="media-tile"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="twelve columns"> 
 
    <div class="blurb-tile"> 
 
     this 
 
    </div> 
 
    </div> 
 
</div>

而且我解決你的一些HTML錯誤的。

參考

.parents()

.next()

.find()