Question

我想改变列表中第4张图像的边距。

HTML是这样的：

<div class="moduletable_lbx">
<div class="custom_lbx"  >
<p>
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-001.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-001-thumb.jpg" alt="" /></a> 
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-002.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-002-thumb.jpg" alt="" /></a> 
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-003.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-003-thumb.jpg" alt="" /></a> 
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-004.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-004-thumb.jpg" alt="" /></a> 
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-005.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-005-thumb.jpg" alt="" /></a>

我创建了一个小jQuery：

jQuery(".moduletable_lbx img:nth-child(4) ").css( "margin-right","0px");

但它不起作用。我注意到，如果我放1而不是4，那么所有正确的边距都会被取消。如果我放2，则没有边缘被取消。

Answer 1

您必须将其更改为：

jQuery(".moduletable_lbx a:nth-child(4) img ").css( "margin-right","0px");

＆＃13;

jQuery(".moduletable_lbx a:nth-child(4) img ").css("margin-right", "0px");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="moduletable_lbx">
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-002.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-002-thumb.jpg" alt="" /></a> 
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-003.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-003-thumb.jpg" alt="" /></a> 
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-004.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-004-thumb.jpg" alt="" /></a> 
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-005.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-005-thumb.jpg" alt="" /></a> 
</div>

＆＃13;

Answer 2

你必须得到容器的 4n 元素，然后是img。

jQuery(".moduletable_lbx a:nth-child(4n) img").css( "margin-right","0px");

问候。

Answer 3

我认为应该是：

jQuery(".moduletable_lbx:nth-child(4) img:nth-child(1)").css( "margin-right","0px");

所以你应该在结尾选择父索引，img总是第一个。

Answer 4

另一种方法，利用:eq()，它应用基于0的索引;检索索引为3的第4个元素：0,1,2， 3 。 nth-选择器应用基于1的索引：1,2,3， 4

:nth-child() Selector

因为jQuery的实现：nth-选择器是严格派生的从CSS规范来看，n的值是“1索引”，意思是计数从1开始。对于其他选择器表达式，例如：eq（）或：甚至jQuery遵循JavaScript的“0索引”计数。特定包含两个<li>的单个，$（“li：nth-child（1）”）选择第一个<li>，$( "li:eq(1)" )选择第二个。

jQuery(".moduletable_lbx img:eq(3)").css( "margin-right","0px")

jQuery(".moduletable_lbx img:eq(3)").css("margin-right", "0px")

img {
  margin-right:24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="moduletable_lbx">
<div class="custom_lbx">
<p>
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-001.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-001-thumb.jpg" alt="" /></a> 
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-002.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-002-thumb.jpg" alt="" /></a> 
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-003.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-003-thumb.jpg" alt="" /></a> 
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-004.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-004-thumb.jpg" alt="" /></a> 
<a title="" href="/images/lyndonosborn/columbia-lbx/columbia-Road-005.jpg" data-lightbox="group:columbia-Road;titlePosition:over;transitionIn:elastic; "><img src="/images/lyndonosborn/columbia-lbx/columbia-Road-005-thumb.jpg" alt="" /></a> 
    </p></div></div>

Answer 5

谢谢大家 - 我和

一起去了

jQuery(".moduletable_lbx a:nth-child(4) img ").css( "margin-right","0px");

它工作正常。

jquery nth-child（n）没有正常工作

5 个答案: