CODEWITHSUNDEEP
javascriptjquery
Miguel Torres
Miguel Torres

Reputation: 27

Get the Class from li with specific position with JQuery

I´m trying to make an script that allows me to check the class of an specific li acording with a position, by example :

<ul id='check_passengers'>
    <li>user one</li>
    <li>user two</li>
    <liclass='user-checked'>user three</li>
    <li>user four</li>
    <li>user five</li>
<ul>


<script>
$(document).ready(function() {
var position_to_search = 2;
var class_of_ul = $('#check_passengers li:' + position_to_search).attr('class');
console.log('User on position 3 : ' + class_of_ul);
});
</script>

Upvotes: 0

Views: 44

Answers (3)

Mamun
Mamun

Reputation: 68933

Try the following with jQuery's eq():

$(document).ready(function() {
  var position_to_search = 2;
  var class_of_ul = $('#check_passengers li:eq(' + position_to_search+')').attr('class');
  console.log('User on position 3 : ' + class_of_ul);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='check_passengers'>
  <li>user one</li>
  <li>user two</li>
  <li class='user-checked'>user three</li>
  <li>user four</li>
  <li>user five</li>
<ul>

OR: with Template literals which is more cleaner: 

$(document).ready(function() {
  var position_to_search = 2;
  var class_of_ul = $(`#check_passengers li:eq(${ position_to_search})`).attr('class');
  console.log('User on position 3 : ' + class_of_ul);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='check_passengers'>
  <li>user one</li>
  <li>user two</li>
  <li class='user-checked'>user three</li>
  <li>user four</li>
  <li>user five</li>
<ul>

Upvotes: 1

Geuis
Geuis

Reputation: 42267

Use css selectors for this:

Use it like this:

$(document).ready(function() {
  var position_to_search = 3;
  var class_of_ul = $('#check_passengers li:nth-child('+ position_to_search +'n)').attr('class');
  console.log('User on position 3 : ' + class_of_ul);
});

Upvotes: 1

Harrison Ifeanyichukwu
Harrison Ifeanyichukwu

Reputation: 292

use the css :nth-child(position) selector for it. Note that the indexing starts from index 1

like below

<ul id='check_passengers'>
    <li>user one</li>
    <li>user two</li>
    <liclass='user-checked'>user three</li>
    <li>user four</li>
    <li>user five</li>
<ul>


<script>
   $(document).ready(function() {
       var position_to_search = 2;
       var class_of_ul = $('#check_passengers li:nth-child(' + position_to_search + ')')
   .attr('class');
       console.log('User on position 2 : ' + class_of_ul);
   });
</script>

Upvotes: 0

Related Questions