选择一个div内的第一个div，但前提是其中有10个
[英]Select the first div inside a div but only if there are 10 of them
问题描述
我要选择的第一div.favourite-image内的#user-favourites-card只有在有整整10 div.favourite-image内的#user-favourites-card 。
我的尝试：
#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("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>
撇开：我想选择这个确切的元素，以证明在茉莉花测试中有10个元素完全正确。
此页面显示了如何完成。 我究竟做错了什么？
2 个解决方案
解决方案1
2 2016-12-03 09:37:04
您的尝试未正确选择期望的孩子。 您会注意到，如果仅使用:first-child尝试选择器，则它不会执行任何操作。 每个<div class="col-sm-6 col-md-4 col-xl-4"></div>是row类之后的直接子级。 任何像：child这样的选择器都要求您处理直接的父子关系，因此您的额外div会使其模糊。
相反，您可以尝试使用以下选择器：
#user-favourites-card .row div:nth-last-child(10):first-child .favourite-image
另外，如果将favourite-image类添加到列类旁边，则可以使用之前尝试的选择器。
例如：
<div class="col-sm-6 col-md-4 col-xl-4 favourite-image">
...
</div>
解决方案2
1 已采纳 2016-12-03 09:15:17
要获取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>
如何在$（this）JQuery选择器选择的元素内选择第一个div？
[英]How to select the first div inside the element selected by the $(this) JQuery selector?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.