Love beautiful code? We do too.

  1. Home
  2. Tutorial
  3. Hàm jQuery
  4. .index() trong jQuery
Previous Lesson Next Lesson

.index() trong jQuery

Định nghĩa và sử dụng .index() trong jQuery

.index(): Trả về vị trí của thành phần trong các thành phần.

Cấu trúc .index() trong jQuery .index() trong jQuery

Đã được thêm vào từ phiên bản 1.0

.index('thành phần')

$('li').index('li');

Đã được thêm vào từ phiên bản 1.4

.index()

$('li').index();
.index(Bộ chọn)

$('li').index($('.test'));

.index(Thành phần)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var txt = $('.third').index('li');
    $('span').text(txt);
});
</script>
</head>

<body>
<ul>
<li class="first">Thành phần thứ 1</li>
<li class="second">Thành phần thứ 2</li>
<li class="third">Thành phần thứ 3</li>
<li class="fourth">Thành phần thứ 4</li>
</ul>
<p>index có giá trị: <span></span></p>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy thành phần li có tên class third ở vị trí 2 (vị trí đầu đươc tính là 0), do đó kết quả trả về 2.

.index(Bộ chọn)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var txt = $('li').index($('.fourth'));
    $('span').text(txt);
});
</script>
</head>

<body>
<ul>
<li class="first">Thành phần thứ 1</li>
<li class="second">Thành phần thứ 2</li>
<li class="third">Thành phần thứ 3</li>
<li class="fourth">Thành phần thứ 4</li>
</ul>
<p>index có giá trị: <span></span></p>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy thành phần li có tên class fourth ở vị trí 3 (vị trí đầu đươc tính là 0), do đó kết quả trả về 3.

Previous Lesson Next Lesson

Viết câu trả lời

Drop Images

0 Bình luận

Danh mục bài học

Hoclaptrinh.vn © 2017

From Coder With