jQuery 객체와 루핑 문제가 발생했습니다.

Question

현재 jQuery 플러그인을 작성 중입니다. <select>을 예쁜 드롭 다운 메뉴로 바꿔 놓았습니다. 문제가 조금 있습니다. 페이지, 나는 다음을 얻을 내 콘솔에이 배열을 누르면

var self = $(this); 
    name = self.attr('name'); 
    select_options = $(this).children(); 
    // an array so that we can related options together 
    sorted_options = []; 
    //loop through the options sorting them into the array as we go. 
    for(i=0;select_options.length>i;i++) { 
     sorted_options.push({ 
      'value': select_options.eq(i).val(), 
      'name': select_options.eq(i).text() 
     }); 
    } 

그래서 나는 배열로 정렬 한 후 옵션을 받고 있어요

[Object { value="0", name="I'm looking for..."}, Object { value="1", name="actors"}, Object { value="2", name="presenters"}, Object { value="3", name="voice overs"}] 
[Object { value="0", name="Skill"}, Object { value="1", name="actors"}, Object { value="2", name="presenters"}, Object { value="3", name="voice overs"}, Object { value="4", name="dancers"}, Object { value="5", name="accents"}, Object { value="6", name="film"}, Object { value="7", name="tv"}] 
[Object { value="0", name="Gender"}, Object { value="1", name="male"}, Object { value="2", name="female"}] 

내 첫 번째 질문에 이렇게 어떻게 내 값으로 0을 가지고 모든 것을 배열에서 제거 할 수 있습니다 플러그인 사용자가도 그것을 알 수 있다면 내가 옵션을 얻었는지와 같은 일부 변경을하기 전에, 드롭 다운에서 첫 번째 항목을 대체, 내가 사용하는 다음,

options.splice(0, 1); 

그러나 옵션은 더 이상, 그래서 난 그냥 제거 할 수없는 존재 각 배열의 첫 번째 항목, 둘째로 나는 그러나 내가

나는 순간에 값을 추가하려면이 코드를 사용하고이 문제를, 데, 나의 새로운 드롭 다운에 값과 이름을 추가 할 필요가

for(i=0;sorted_options.length>i;i++) { 
    $('.dropdown dd ul').append('<li <a href="#"><span class="option">'+ sorted_options[i]['value'] + '</span><span class="value">' + sorted_options[i]['name'] + '</span></a></li>'); 
} 

그러나 이것은 내가 본 3 개의 모든 객체를 추가합니다. 첫 번째 드롭 다운에 콘솔, 두 번째 객체에 내 콘솔에서 볼 수있는 객체 2 개, 마지막 드롭 다운에 한 개의 객체.

나는 등 첫 번째 드롭 다운에 첫 번째 개체, 두 번째와 세 번째 세 번째로 두 번째를 추가 할 필요가

당신은 목록에서 필터링 할 수 있습니다

Answer 1

,가 동일 value특성을 갖는 모든 객체 이 방법으로 :

:

/** 
* Remove from a list all object having `obj.value` == value (ex. 0). 
* 
* @param {Object} value The value to avoid. 
* @param {Array:Object} A list of objects. 
* @return {Array:Object} The new filtered Array.-*emphasized text* 
*/ 
function filterByValue(value, list) { 
    var newlist = [], 
     obj, 
     max, 
     i; 

    for (i = 0, max = list.length; i < max; i += 1) { 
     obj = list[i]; 

     if (obj.value !== value) { 
     newlist.push(obj); 
     } 
    } 
} 

var newList = filterByValue(0, list); 

이제 (목록의 목록입니다) 당신의 select_options 목록을 필터링했습니다

그런 다음 오른쪽 options 목록을 해당 select에 추가해야합니다.

var uls = document.getElementsByClassName("dropdown"). 
        .getElementsByTagName("dd"). 
        .getElementsByTagName("ul"); 

for (var i = 0, max = uls.length; i < max; i += 1) { 
    ul = uls[i]; 

    sortedOptions = sortedOptions[i]; 

    ul.innerHTML = '<li <a href="#"><span class="option">'+ sortedOptions[i]['value'] + '</span><span class="value">' + sortedOptions[i]['name'] + '</span></a></li>'; 
} 

Answer 2

첫 번째 질문의 경우, 배열의 요소를 필터링 할 수 jQuery.grep() 기능을 사용할 수 있습니다. 두 번째 질문, 나는 아마 (내가 제대로 이해하는 경우)의 라인을 따라이 작업을 수행 할 것 들어

var filteredArray = $.grep(rawArray, function(v,i) { 
    return (v.value === '0' ? null : v); 
}); 

는 jQuery.each를 사용하여 :

var template = $(
    '<li><a href="#"><span class="option"></span><span class="value"></span></a></li>' 
), dropdown = $('.dropdown dd ul'); 

// notice that the args of $.grep and $.each are reversed 
$.each(filteredArray, function(i,v) { 
    // add the (i)th object to the (i)th dropdown 
    dropdown.eq(i).append(
     template.clone() 
      .find('.option').text(v.value).end() 
      .find('.value).text(v.name).end() 
    ); 
}); 

을 그래서 기본적으로 :

1. jQuery를이있다 원시 JS 배열을 통한 필터링 및 반복을위한 내장 된 기능.
2. DOM에 삽입하는 HTML 템플릿을 캐시하십시오 (문서에 추가 할 때마다 jQuery가 전체 "선택"을 수행 할 필요가 없도록)
3. 드롭 다운 선택도 캐시하십시오. 같은 이유.