jQuery를 사용하여 동적으로 정렬 된 목록

Question

을 새로 나는 다음과 같이 보이는 정렬 된 목록이 있습니다

이

<div class="col-md-2 panel panel-default"> 
    <div class="panel-heading">Species Seen</div> 
     <div class="panel-body" style="height: 350px; overflow:auto"> 
      <ol id="speciesAdded"></ol> 
    </div> 
</div> 

정렬되지 않은 목록이 비어 밖으로 시작하고 사용자가 페이지에 항목을 추가 할 수 있습니다. 또는 버튼을 클릭하여 DB의 항목으로 만든 목록을 만들 수 있습니다. 이것은 문제가되는 부분입니다.

$("#refreshButton").click(function() { 
    var url = "/FieldTrip/RefreshFieldTripSightingList"; 
    var fieldTripName = $("#FieldTripName").val(); 
    var accountRowId = $("#AccountRowId").val(); 

    /* Clear any existing list */ 
    $("ol#speciesAdded").empty(); 

    $.getJSON(url, { accountRowId: accountRowId, fieldTripName: fieldTripName }, function (data) { 
     $.each(data, function (i, item) { 
      $("ol$speciesAdded").appendTo("li").text(item.species); 
     }); 
    }); 
}); 

AJAX 호출이 이루어 나는 다시 아이템을 얻을되고있다 : 이것은 AJAX 호출을하고 목록을 새로 시도 내 jQuery 코드입니다. 그러나 내 주문한 목록은 지워진 후에 DB의 항목으로 새로 고쳐지지 않습니다.

이것은 MVC 5 앱입니다. 당신이 상쾌, 내가 전에 empty()를 사용하는 것이 좋습니다 것입니다 얻으려면

Answer 1

$("ol$speciesAdded").appendTo("li").text(item.species); 

선택기 $는 ... 내가 믿는, 그런데

// is what you wanted? 
$("ol#speciesAdded").appendTo("li").text(item.species); 

잘못된 것입니다. 당신이 사용하는 경우

$("ol#speciesAdded").empty(); 

하나 더 tipp는 appendTo 새 항목이 추가 될 때마다 다시 쓰게 DOM을 드릴 것입니다. 그것은별로 성과가 없습니다.

모든 HTML을 가져 와서 한 번에 삽입하십시오.

var items = []; 

// in the loop then 
items.push('<li>' + text + '</li>'); 

// insert all at once... 
$("ol#speciesAdded").empty().html(items.join("")); 

Answer 2

선택자는 $ 일 수 없습니다. jQuery를 혼동 실수로 당신을했고 당신은에서 코드를 변경 싶어 있습니다

$.each(data, function (i, item) { 
    $("ol#speciesAdded").appendTo("li").text(item.species); 
}); 

또한, 상쾌하기 전에, 당신은 취소해야 # ID 선택기로 $를 대체하여

$.each(data, function (i, item) { 
    $("ol$speciesAdded").appendTo("li").text(item.species); 
}); 

이전 값 따라서 다음과 같이하십시오.

$("ol#speciesAdded").html(""); 
$.each(data, function (i, item) { 
    $("ol#speciesAdded").appendTo("li").text(item.species); 
});