[英]how can i select only last span element in a div ? it should not select if only one span in the div
I have HTML like this 我有像这样的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>
I want to select last labelText
in every elementContainer
我想在每个elementContainer
选择最后一个labelText
$('.elementContainers').find('.labelText:last')
This gives me exactly what i need,but i need to check that first and last should not be the same( elementContainer
should contain two elements ) 这给了我正是我需要的东西,但是我需要检查第一个和最后一个不应该是相同的( elementContainer
应该包含两个元素)
How can i check that with :not
selector or any other selector. 如何检查:not
选择器或任何其他选择器。
I have tried something like this 我尝试过这样的事情
$('.elementContainers').find('.labelText:last:not(".labelText:first")')
But its not working,its returning no elements. 但它不起作用,它没有返回任何元素。
Thanks :) 谢谢 :)
If you want to select the last span in a div, but only where there is more than one span in the div, then the following selector should work. 如果要选择div中的最后一个跨度,但仅在div中有多个跨度的位置,则应使用以下选择器。
$('div').find('span:gt(0):last').addClass('selected');
It's finding any span's at an index > 0 ( https://api.jquery.com/gt-selector/ ), and then getting the last of those. 它找到索引> 0( https://api.jquery.com/gt-selector/ )的任何跨度,然后获取最后一个。
http://jsfiddle.net/daveSalomon/vnorunwm/ http://jsfiddle.net/daveSalomon/vnorunwm/
Your code could look something like this.... 你的代码看起来像这样....
$('.elementContainers').find('.labelText:gt(0):last').css('margin-left','150px');
http://jsfiddle.net/daveSalomon/qoebk8j9/ http://jsfiddle.net/daveSalomon/qoebk8j9/
If there is as option to change html I will make a try using label
instead of span
and without using jquery
at all only with css: 如果有更改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>
References 参考
You can use .filter()
method and you can return that element which have .labelText
length of 2: 您可以使用.filter()
方法,并且可以返回.labelText
长度为2的元素:
$('.elementContainers').filter(function(){ return $(this).find('.labelText').length == 2 }).find('.labelText').last().css('margin-left','150px');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>
Check that the length of your collection is greater than 1 before proceeding... 在继续之前检查集合的长度是否大于1 ...
if ($('.elementContainers').find('.labelText').length > 1) {
$('.elementContainers').find('.labelText:last').css('margin-left','150px');
}
尝试这个
$('.elementContainers .labelText:last').not($('.elementContainers .labelText:first'))
Try this 尝试这个
$('.elementContainers').each(function(){ if($(this).find('.labelText').length > 1 ){ $(this).find('.labelText:last').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>
you have to first check the length of span element inside div if length is greater then 1 then get the last span inside div , 如果长度大于1则必须首先检查div内的span元素的长度然后得到div中的最后一个span,
you can get the length using 你可以使用长度
var span_lenght = $( ".elementContainers span" ).length;
if(span_lenght>1)
{
// write your code here
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.