我有像这样的HTML
$('.elementContainers').find('.labelText:last:not(".labelText:first")').css('margin-left','150px');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="elementContainers">
<span class="labelText mandatory" >First Name</span>
<span class="spacing"></span>
<input type="text" class="customInput" id="firstName" name="firstName" value="" pattern="[A-Za-z]{2,}" required/>
<span class="labelText" >Last Name</span>
<span class="spacing"></span>
<input type="text" class="customInput" id="lastName" value="" name="lastName" pattern="[A-Za-z]{1,}" required/>
</div>
<div class="elementContainers">
<span class="labelText mandatory" >Gender</span>
<span class="spacing"></span>
<input type="radio" name="gender" >Male
<input type="radio" name="gender" >Female
</div>
&#13;
我想在每个labelText
elementContainer
$('.elementContainers').find('.labelText:last')
这正是我所需要的,但是我需要检查第一个和最后一个不应该相同(elementContainer
应该包含两个元素)
如何使用:not
选择器或任何其他选择器检查它。
我尝试过这样的事情
$('.elementContainers').find('.labelText:last:not(".labelText:first")')
但它不起作用,它没有返回任何元素。
谢谢:)
答案 0 :(得分:2)
如果要选择div中的最后一个跨度,但只有div中有多个跨度的位置,则以下选择器应该有效。
$('div').find('span:gt(0):last').addClass('selected');
它在索引处找到任何跨度&gt; 0(https://api.jquery.com/gt-selector/),然后得到最后一个。
http://jsfiddle.net/daveSalomon/vnorunwm/
您的代码看起来像这样......
$('.elementContainers').find('.labelText:gt(0):last').css('margin-left','150px');
答案 1 :(得分:2)
如果有更改html的选项,我会尝试使用label
代替span
,而不使用jquery
只使用css:
.elementContainers label:last-of-type:not(:first-child) {
margin-left: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="elementContainers">
<label class="labelText mandatory">First Name</label>
<span class="spacing"></span>
<input type="text" class="customInput" id="firstName" name="firstName" value="" pattern="[A-Za-z]{2,}" required/>
<label class="labelText">Last Name</label>
<span class="spacing"></span>
<input type="text" class="customInput" id="lastName" value="" name="lastName" pattern="[A-Za-z]{1,}" required/>
</div>
<div class="elementContainers">
<label class="labelText mandatory">Gender</label>
<span class="spacing"></span>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
<强>参考强>
答案 2 :(得分:1)
您可以使用I/O
方法,并且可以返回.filter()
长度为2的元素:
.labelText
&#13;
$('.elementContainers').filter(function(){
return $(this).find('.labelText').length == 2
}).find('.labelText').last().css('margin-left','150px');
&#13;
答案 3 :(得分:1)
在继续之前检查收藏的长度是否大于1
if ($('.elementContainers').find('.labelText').length > 1) {
$('.elementContainers').find('.labelText:last').css('margin-left','150px');
}
答案 4 :(得分:1)
试试这个
$('.elementContainers .labelText:last').not($('.elementContainers .labelText:first'))
答案 5 :(得分:1)
试试这个
$('.elementContainers').each(function(){
if($(this).find('.labelText').length > 1 ){
$(this).find('.labelText:last').css('margin-left','150px');
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="elementContainers">
<span class="labelText mandatory" >First Name</span>
<span class="spacing"></span>
<input type="text" class="customInput" id="firstName" name="firstName" value="" pattern="[A-Za-z]{2,}" required/>
<span class="labelText" >Last Name</span>
<span class="spacing"></span>
<input type="text" class="customInput" id="lastName" value="" name="lastName" pattern="[A-Za-z]{1,}" required/>
</div>
<div class="elementContainers">
<span class="labelText mandatory" >Gender</span>
<span class="spacing"></span>
<input type="radio" name="gender" >Male
<input type="radio" name="gender" >Female
</div>
&#13;
答案 6 :(得分:1)
如果长度大于1,则必须首先检查div中span元素的长度,然后获取div中的最后一个span,
你可以使用
获得长度var span_lenght = $( ".elementContainers span" ).length;
if(span_lenght>1)
{
// write your code here
}