Jquery - 클래스의 모든 div를 기반으로 객체를 만드는 방법은 무엇입니까?

Question

문서 준비가 완료되면 클래스의 모든 div에 대한 개체를 만들고 div의 특성 'id'를 기반으로 개체를 할당하려고합니다. 다음은 작동하지 않는 코드입니다. 알아낼 수 없습니다.

<div class="supercolor" >      
    <div class="colordiv" id="#111111" style="background-color:#111111;">&nbsp;</div> 
    <div class="colordiv" id="#222222" style="background-color:#222222;" >&nbsp;</div>     
    <div class="colordiv" id="#333333" style="background-color:#333333;">&nbsp;</div> 
</div> 

내 스크립트 섹션에 있습니다.

$(document).ready(function() { 

    $('div.supercolor > div').each(function() { 
     var color_object = { $(this).attr('id') : false } 
    }); 
}); 

는

Answer 1

$(function() { 

    var divObjects = $("div.supercolor > div").map(function(val) { 
     return new DivObject(this.id); 
    }).get(); 

}); 

function DivObject(id) { 
    this.id = id; 
    ... 
} 

이 모든 <div> '의의를 가지고 객체를 div에에 매핑합니다 감사합니다. ID와 같은 개인 <div>의 데이터를 전달하여 생성자에 전달할 수 있습니다.

어레이를 나가려면 .get()으로 전화해야합니다.

[편집]

var testDiv = $.grep(divObjects, function(val) { 
    val.id === "test" 
})[0]; 

이 코드가 더 익숙한 보일 수 있지만

var testDiv; 
for (var i = 0, ii = divObjects.length; i < ii; i++) { 
    var div = divObjects[i]; 
    if (div.id === "test") { 
     testDiv = div; 
     break; 
    } 
} 

Answer 2

, 내가 것 당신이 'DivObjects'의 배열을 저장하기위한 좋은 이유가없는 한 접근 방식을 변경하는 것을 고려하십시오.

페이지로드시 각 색상 div에 클릭 핸들러를 연결하여 div에서 '선택한'클래스를 토글합니다 (다른 사용자와 함께 제거).

$("div.supercolor > div.selected").attr('id'); 

것은이 적합하지 않을 수 있습니다 : 당신은 (있는 경우) '선택'클래스와 색상을 선택 된 div 선택된 색을 얻고, 그것을 끌어해야하는 시점에서

$("div.supercolor > div").click(function(){ 
    $(this).toggleClass('selected').siblings('.selected').removeClass('selected'); 
}); 

는 ID의 귀하의 상황에서는 간단하지만 효과적입니다.