I have HTML like this

$('.elementContainers').find('.labelText:last:not(".labelText:first")').css('margin-left','150px');

<script src=".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 have HTML like this

$('.elementContainers').find('.labelText:last:not(".labelText:first")').css('margin-left','150px');

<script src="https://ajax.googleapis./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

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

How can i check that with :not selector or any other selector.

I have tried something like this

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

But its not working,its returning no elements.

Thanks :)

• javascript
• jquery
• jquery-selectors

• Check that the length of $('.elementContainers').find('.labelText') is greater than 1 – Turnip Commented Oct 16, 2015 at 12:23
• What's with using Array.length? If lte 1 you don't select it. – Clijsters Commented Oct 16, 2015 at 12:23
• try this $('.elementContainers .labelText:last').not($('.elementContainers .labelText:first')) – Kishor Vitekar Commented Oct 16, 2015 at 12:34

7 Answers 7

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').find('span:gt(0):last').addClass('selected');

It's finding any span's at an index > 0 (https://api.jquery./gt-selector/), and then getting the last of those.

http://jsfiddle/daveSalomon/vnorunwm/

Your code could look something like this....

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

http://jsfiddle/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:

.elementContainers label:last-of-type:not(:first-child) {
  margin-left: 150px;
}

<script src="https://ajax.googleapis./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

:last-of-type

Check that the length of your collection is greater than 1 before proceeding...

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

Try this

$('.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./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 can use .filter() method and you can return that element which have .labelText length of 2:

$('.elementContainers').filter(function(){
 return $(this).find('.labelText').length == 2
}).find('.labelText').last().css('margin-left','150px');

<script src="https://ajax.googleapis./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>

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 ,

you can get the length using

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