我怎么 select 只能是 div 中的最后一个 span 元素？如果 div 中只有一个跨度，则不应 select

Question

我有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>

我想 select 最后 labelText 每 elementContainer

$('.elementContainers').find('.labelText:last')

这正是我所需要的，但我需要检查 first 和 last 不应该相同（elementContainer 应该包含两个元素）

我如何用 :not selector 或任何其他 selector.

检查

我试过这样的东西

$('.elementContainers').find('.labelText:last:not(".labelText:first")')

但是它不起作用，它没有返回任何元素。

谢谢:)

Answer 1

您可以使用 .filter() 方法，您可以 return 具有 .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>

Answer 2

在继续之前检查您的集合的长度是否大于 1...

if ($('.elementContainers').find('.labelText').length > 1) {
    $('.elementContainers').find('.labelText:last').css('margin-left','150px');
}

Answer 3

如果你想select最后一个span在一个div中，但只有在div中有多个span的地方，那么下面select或者应该工作。

$('div').find('span:gt(0):last').addClass('selected');

它在索引 > 0 (https://api.jquery.com/gt-selector/) 处找到任何跨度，然后获取其中的最后一个。

http://jsfiddle.net/daveSalomon/vnorunwm/

您的代码可能如下所示....

$('.elementContainers').find('.labelText:gt(0):last').css('margin-left','150px');

http://jsfiddle.net/daveSalomon/qoebk8j9/

Answer 4

试试这个

$('.elementContainers .labelText:last').not($('.elementContainers .labelText:first'))

Answer 5

试试这个

$('.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>

Answer 6

如果有更改 html 的选项，我将尝试使用 label 而不是 span 并且完全不使用 jquery 只有 [=30] =]:

.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>

参考资料

:last-of-type

Answer 7

你必须首先检查 div 中 span 元素的长度，如果长度大于 1，则获取 div 中的最后一个跨度，

您可以使用

获取长度

var span_lenght = $( ".elementContainers span" ).length;
if(span_lenght>1)
{
  // write your code here
}

我怎么 select 只能是 div 中的最后一个 span 元素？如果 div 中只有一个跨度，则不应 select

how can i select only last span element in a div ? it should not select if only one span in the div

javascript

jquery

jquery-selectors