选择一个div内的第一个div，但前提是其中有10个
[英]Select the first div inside a div but only if there are 10 of them
问题描述
I want to select the first div.favourite-image inside #user-favourites-card only if there are exactly 10 div.favourite-image inside #user-favourites-card . 
我要选择的第一div.favourite-image内的#user-favourites-card只有在有整整10 div.favourite-image内的#user-favourites-card 。
my attempt: 我的尝试：
#user-favourites-card div.favourite-image:nth-last-child(10):first-child
the html to select from: 要选择的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("result-images/dairy_free_parmesan_alternative_original.jpg");"></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("result-images/dairy_free_mozzarella_alternative.jpg");"></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("result-images/dairy_free_tasty_cheese_sauce.jpg");"></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("result-images/dairy_free_mild_cheese_mix.jpg");"></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("result-images/sugar_free_dark_chocolate_salted_caramel.png");"></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("result-images/alpro_drink_for_professional.jpg");"></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("result-images/alpro_custard.jpg");"></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("result-images/alpro_coconut_dessert.jpg");"></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("result-images/alpro_creamy_caramel.jpg");"></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("result-images/dairy_free_sour_cream_alternative.jpg");"></div>
</div>
</div>
</div>
aside: I'm wanting to select this exact element to prove there are 10 of them exactly in a Jasmine test. 撇开：我想选择这个确切的元素，以证明在茉莉花测试中有10个元素完全正确。
This page shows how it can be done. 此页面显示了如何完成。 What am I doing wrong? 我究竟做错了什么？
2 个解决方案
解决方案1
2 2016-12-03 09:37:04
Your attempt doesn't correctly select the children as you'd expect. 您的尝试未正确选择期望的孩子。 You'll notice that if you try out your selector with just :first-child that it doesn't do anything. 您会注意到，如果仅使用:first-child尝试选择器，则它不会执行任何操作。 Each <div class="col-sm-6 col-md-4 col-xl-4"></div> is the direct child following the row class. 每个<div class="col-sm-6 col-md-4 col-xl-4"></div>是row类之后的直接子级。 Any :child like selector requires you to operate on direct parent to child relationships, so your extra divs obscure that. 任何像：child这样的选择器都要求您处理直接的父子关系，因此您的额外div会使其模糊。
Instead, you can try this selector: 相反，您可以尝试使用以下选择器：
#user-favourites-card .row div:nth-last-child(10):first-child .favourite-image
As seen in this fiddle. 正如在这个小提琴中看到的那样。
Alternatively, if you add the favourite-image class alongside your column classes, you can then stick to the selector you tried earlier. 另外，如果将favourite-image类添加到列类旁边，则可以使用之前尝试的选择器。
For example: 例如：
<div class="col-sm-6 col-md-4 col-xl-4 favourite-image">
...
</div>
解决方案2
1 已采纳 2016-12-03 09:15:17
To get the first element of a querySelectorAll node list if its length is exactly 10: 要获取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("result-images/dairy_free_parmesan_alternative_original.jpg");"></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("result-images/dairy_free_mozzarella_alternative.jpg");"></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("result-images/dairy_free_tasty_cheese_sauce.jpg");"></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("result-images/dairy_free_mild_cheese_mix.jpg");"></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("result-images/sugar_free_dark_chocolate_salted_caramel.png");"></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("result-images/alpro_drink_for_professional.jpg");"></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("result-images/alpro_custard.jpg");"></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("result-images/alpro_coconut_dessert.jpg");"></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("result-images/alpro_creamy_caramel.jpg");"></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("result-images/dairy_free_sour_cream_alternative.jpg");"></div> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.