使用 JQuery 从 li 获取具有特定位置的类

Question

我正在尝试制作一个脚本，该脚本允许我检查与位置一致的特定 li 的类，例如：

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

Answer 1

使用 jQuery 的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>

或者：使用更干净的Template literals：

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

Answer 2

为此使用 css 选择器：

• 第 N 种类型 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
• 第 N 个孩子 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

像这样使用它：

$(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);
});

Answer 3

使用 css ：nth-child(position( 选择器。请注意，indexing从索引1

像下面一样

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