정렬되지 않은 목록에 항목을 추가하는 방법정렬되지 않은 목록에 항목을 추가하는 방법jquery 사용

정렬되지 않은 목록에 항목을 추가하는 방법

jquery 사용

제 json 응답으로 $.each를 사용하여 루프하고 아이템을 추가하겠습니다.<ul></ul>요소.

    $.each(data, function(i, item) {

        // item.UserID
        // item.Username

     }

추가하다

사용자 페이지에 링크하는href 태그를 만듭니다.

가장 효율적인 방법은 어레이를 생성하여 돔에 한 번 추가하는 것입니다.

이 스트링에서 콘센트 문자열을 모두 잃어버리면 더 나아질 수 있습니다.어레이에 여러 번 푸시하거나 +=를 사용하여 문자열을 빌드한 다음 를 누릅니다. 그러나 일부에서는 읽기 어렵습니다.

또한 모든 항목을 상위 요소(이 경우 ul)로 랩하고 이를 컨테이너에 추가하여 최적의 성능을 얻을 수 있습니다.그냥 '를 누르세요.<ul>'그리고.'</ul>'앞에, 뒤에, 그리고 div에 붙입니다.

data = [
{
  "userId": 1,
  "Username": "User_1"
},
{
  "userId": 2,
  "Username": "User_2"
}
];

var items = [];

$.each(data, function(i, item) {

  items.push('<li><a href="yourlink?id=' + item.UserID + '">' + item.Username + '</a></li>');

}); // close each()

$('#yourUl').append(items.join(''));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="yourUl">
</ul>

나는 레드스퀘어의 훌륭한 답변을 받아들여 조금 개선하기로 결심했다.HTML을 추가하는 것보다 jQuery 객체를 추가하는 것이 좋습니다.그래야 HTML을 탈옥할 염려가 없어집니다.

이 예에서는,data에는 JSON에서 해석된 오브젝트 배열이 포함되어 있습니다.어레이의 각 개체에는.title소유물.jQuery's를 사용합니다.each기능을 합니다.

var items=[];
$(data).each(function(index, Element) {
    items.push($('<li/>').text(Element.title));
});
$('#my_list').append.apply($('#my_list'), items);

새 jQuery 개체를 항목 배열에 푸시하지만 메서드 체인을 사용하면 다음과 같은 속성을 미리 설정할 수 있습니다..text.

그런 다음 목록에 개체 배열을 추가합니다.<ul id="my_list">라스 거스만의 방법을 사용해서요

입수하다<ul>jQuery selector 구문을 사용한 후 호출append:

$("ul#theList").append("<li><a href='url-here'>Link Text</a></li>");

자세한 내용은 jQuery 문서를 참조하십시오.

$.each(data, function(i, item) {

       var li = $("<li><a></a></li>");

       $("#yourul").append(li);

       $("a",li).text(item.Username);
       $("a",li).attr("href", "http://example.com" + item.UserID);

    }

언급URL : https://stackoverflow.com/questions/1208467/how-to-add-items-to-a-unordered-list-ul-using-jquery