나열할 HTML 배열

HTML에서는 데이터를 저장하고 표시하는 데 배열이 자주 사용됩니다. 그러나 배열을 직접 표시하면 사용자 경험이 저하됩니다. 따라서 HTML 배열을 보다 사용자 친화적인 목록으로 변환해야 합니다.

HTML 배열을 목록으로 변환하는 프로세스는 JavaScript 및 jQuery를 사용하여 수행할 수 있습니다. 다음은 HTML 배열을 목록으로 변환하는 구현 방법을 자세히 소개합니다.

1. HTML 배열 정의

먼저 데이터를 저장할 HTML 배열을 정의해야 합니다. 다음은 간단한 HTML 배열 예입니다.

<ul id="array">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>西瓜</li>
</ul>

이 배열에는 사과, 바나나, 오렌지, 수박이라는 4가지 요소가 포함되어 있습니다.

2. jQuery 선택기를 사용하여 배열 요소 선택

다음으로 jQuery 선택기를 사용하여 배열 요소를 선택해야 합니다. 위 HTML 배열의 경우 다음 코드를 사용할 수 있습니다.

var arrayElements = $('#array li');

이 코드 줄은 모든 li 요소를 선택하여 arrayElements 변수에 저장합니다.

3. 배열 요소를 반복하여 목록으로 변환

다음으로 배열 요소를 반복하여 목록으로 변환해야 합니다. 다음 코드를 사용하여 이를 수행할 수 있습니다.

var listElements = $('<ul>');

arrayElements.each(function() {
  var listItem = $('<li>').append($(this).text());
  listElements.append(listItem);
});

먼저 빈 목록 요소를 만듭니다. 그런 다음, 선택된 li 요소를 순회하기 위해 각각() 메소드를 사용합니다. 루프에서는 각 li 요소에 대해 새 목록 항목을 만들고 해당 텍스트 내용을 목록 항목에 추가합니다. 마지막으로 목록 항목을 목록 요소에 추가합니다.

4. 원래 배열 바꾸기

마지막으로 원본 HTML 배열을 방금 만든 목록으로 바꿔야 합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

$('#array').replaceWith(listElements);

이 코드는 원본 HTML 배열을 가져와서 방금 만든 목록 요소로 대체합니다.

전체 코드는 다음과 같습니다.

var arrayElements = $('#array li');
var listElements = $('<ul>');

arrayElements.each(function() {
  var listItem = $('<li>').append($(this).text());
  listElements.append(listItem);
});

$('#array').replaceWith(listElements);

이런 방식으로 HTML 배열을 친숙한 목록으로 성공적으로 변환하여 사용자에게 표시했습니다.

위 내용은 나열할 HTML 배열의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!