How can I select only the last span element in a div? it should not select if only one range in a div

Question

I have such 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>

Run code

I want to choose the last one labelTextin eachelementContainer

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

This gives me exactly what I need, but I need to check that the first and last should not be the same ( elementContainershould contain two elements)

How can I check this with a selector :notor any other selector.

I tried something like this

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

But it does not work, no elements return it.

Thanks:)

Answer 1

div, , div , .

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

: last-of-type

Answer 3

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

Answer 4

, 1, ...

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

Answer 5

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

Answer 6

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

you need to first check the length of the span element inside the div if the length is greater than 1, and then get the last span inside the div,

you can get the length using

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