jQuery UI Selectable : 선택한 항목의 텍스트를 가져옵니다.

Question

이 코드는 jQuery 선택 가능 UI (https://jqueryui.com/selectable/#serialize)에서 가져온 것입니다. 인덱스 대신 선택된 text 값을 추가하려면 어떻게 수정해야합니까?

나는 실패 여러 가지 방법을 시도 :

1. var index = $("#selectable li").text(); # 이것이 첫 번째 항목을 추가하고에서

$(function() { 
    $("#selectable").selectable({ 
     stop: function() { 
      var result = $("#select-result").empty(); 
      $(".ui-selected", this).each(function() { 
       var index = $("#selectable li").index(this); 
       result.append(" #" + (index + 1)); 
      }); 
     } 
    }); 
}); 


    <ol id="selectable"> 
     <li class="ui-widget-content">Item 1</li> 
     <li class="ui-widget-content">Item 2</li> 
     <li class="ui-widget-content">Item 3</li> 
     <li class="ui-widget-content">Item 4</li> 
     <li class="ui-widget-content">Item 5</li> 
     <li class="ui-widget-content">Item 6</li> 
    </ol> 

Answer 1

을 중지 모든 것을에게

var index = $("#selectable li").html(); #을 추가합니다: 첫 번째의

얻기 HTML 내용 :

그들의 후손 documentation for .html()에서

을 포함하여, 일치 요소의 세트에 각 요소의 결합 된 텍스트 내용을 가져 오기 일치하는 집합의 요소

---

이 작업을 시도 할 수 :

이

$("#selectable").selectable({ 
    stop: function() { 
     var text = $(this).children(".ui-selected").map(function() { 
      return $(this).text(); 
     }).get().join('; '); 
     $("#select-result").text(text); 
    } 
}); 

jsfiddle

이 선택한 각 항목의 텍스트를 얻기 위해 .map() function를 사용합니다. DOM 요소 대신 실제로 문자열 객체가 들어있는 jQuery 객체를 반환하므로 .get() function이 문자열 배열을 가져 오는 데 사용됩니다. 그런 다음 array's .join() function은 문자열을 결합하는 데 사용됩니다.

Answer 2

$("#selectable")selectable({ 
    stop: function() { 
     var text += $(this)children(".ui-selected").map(function() { 
      return $(this).text(); 
     }).get().join('; '); 
     $("#select-result").text(text); 
    } 
});