選擇div內的第一個div，但僅當其中有10個時

只有在#user-favourites-card內部確切存在10 div.favourite-image時，我才選擇#user-favourites-card中的第一個div.favourite-image。選擇div內的第一個div，但僅當其中有10個時

我嘗試：

#user-favourites-card div.favourite-image:nth-last-child(10):first-child

的HTML來選擇：

<div _ngcontent-qcm-36="" class="card-noshadow" id="user-favourites-card"> 
    <div _ngcontent-qcm-36="" class="first-card-header"> 
     <h6 _ngcontent-qcm-36="">Favourites</h6> 
    </div> 
    <div _ngcontent-qcm-36="" class="row"> 
     <!--template bindings={ 
    "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" 
}--><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 

     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_parmesan_alternative_original.jpg&quot;);"></div> 
     </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 

     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_mozzarella_alternative.jpg&quot;);"></div> 
     </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 

     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_tasty_cheese_sauce.jpg&quot;);"></div> 
     </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 

     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_mild_cheese_mix.jpg&quot;);"></div> 
     </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 

     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/sugar_free_dark_chocolate_salted_caramel.png&quot;);"></div> 
     </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 

     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_drink_for_professional.jpg&quot;);"></div> 
     </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 

     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_custard.jpg&quot;);"></div> 
     </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 

     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_coconut_dessert.jpg&quot;);"></div> 
     </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 

     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_creamy_caramel.jpg&quot;);"></div> 
     </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 

     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_sour_cream_alternative.jpg&quot;);"></div> 
     </div> 
    </div> 
</div>

題外話：我想選擇此確切元素，以證明有他們的10正好在茉莉花測試。

This page顯示瞭如何完成。我究竟做錯了什麼？

來源

2016-12-03 BeniaminoBaggins

你可以清理一點點的HTML。有很多減價與問題無關，而且很難閱讀。（例如圖片） – vals

@vals，但有人會說他們需要查看瀏覽器輸出的所有html。 – BeniaminoBaggins

@vals是正確的。大多數標記妨礙我們來幫助你。如果你讓你的代碼可執行，它也會很棒。 –

要獲得querySelectorAll節點列表的第一個元素，如果它的長度正好是10：

favImg = function() { 
 
    favImgList = document.querySelectorAll('#user-favourites-card div.favourite-image'); 
 
    return (favImgList.length == 10) ? favImgList[1] : 'null'; 
 
} 
 
console.log(favImg());

<div _ngcontent-qcm-36="" class="card-noshadow" id="user-favourites-card"> 
 
    <div _ngcontent-qcm-36="" class="first-card-header"> 
 
    <h6 _ngcontent-qcm-36="">Favourites</h6> 
 
    </div> 
 
    <div _ngcontent-qcm-36="" class="row"> 
 
    <!--template bindings={ 
 
    "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" 
 
}--> 
 
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 
 

 
     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_parmesan_alternative_original.jpg&quot;);"></div> 
 
    </div> 
 
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 
 

 
     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_mozzarella_alternative.jpg&quot;);"></div> 
 
    </div> 
 
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 
 

 
     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_tasty_cheese_sauce.jpg&quot;);"></div> 
 
    </div> 
 
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 
 

 
     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_mild_cheese_mix.jpg&quot;);"></div> 
 
    </div> 
 
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 
 

 
     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/sugar_free_dark_chocolate_salted_caramel.png&quot;);"></div> 
 
    </div> 
 
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 
 

 
     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_drink_for_professional.jpg&quot;);"></div> 
 
    </div> 
 
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 
 

 
     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_custard.jpg&quot;);"></div> 
 
    </div> 
 
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 
 

 
     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_coconut_dessert.jpg&quot;);"></div> 
 
    </div> 
 
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 
 

 
     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_creamy_caramel.jpg&quot;);"></div> 
 
    </div> 
 
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4"> 
 

 
     <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_sour_cream_alternative.jpg&quot;);"></div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-12-03 09:15:17 SLePort

您嘗試不正確地選擇了孩子，你會期望。你會注意到，如果你只用:first-child來嘗試你的選擇器，那它就什麼都不做。每個<div class="col-sm-6 col-md-4 col-xl-4"></div>是繼row課後的直接子女。任何：孩子喜歡選擇器要求你操作直接的父母對子女的關係，所以你的額外divs掩蓋了。

相反，你可以試試這個選擇：或者

#user-favourites-card .row div:nth-last-child(10):first-child .favourite-image

As seen in this fiddle.

，如果添加favourite-image類的列班旁邊，然後你可以堅持你剛纔試過的選擇。

例如：

<div class="col-sm-6 col-md-4 col-xl-4 favourite-image"> 
    ... 
</div>

As seen in this fiddle.

來源

2016-12-03 09:37:04

選擇div內的第一個div，但僅當其中有10個時

回答

相關問題