jQuery로 특정 <dive> 태그 위치 이동 하기 prependTo 함수 사용법

 <div class="chargerSummary">
    <div class="chargerBox">
        <div class="charger charger_slow " >
            <div class="dispFlex">
              //내용
            </div> 
        </div>
        <div class="charger charger_ac3" >
            <div class="dispFlex">
                //내용
            </div>
        </div>
        <div class="charger charger_dccom" >
            <div class="dispFlex">
               //내용
            </div>
        </div>
           <div class="charger charger_dcdemo" >
            <div class="dispFlex">
                //내용
            </div>
        </div>
        <div class="charger charger_h" >
            <div class="dispFlex">
              //내용
            </div>
        </div>
    </div>

위의 HTML을 보면 div 태그 별 각 다른 className을 가지고 있습니다. 

div 태그가 나열 되어있는데 특정 div 태그의 위치를 변경하고 싶었습니다. 

저는 기존에 특정 값이 존재하면 특정 div에 active 속성 값을 주는 코드를 가지고 있었습니다. 

 

if ($(".count_dcdemo").text() !== "0") {
    // 해당 태그에 active 클래스 추가
    $(".charger_dcdemo").addClass("active");
    $(".dcDemo").addClass("active");

}

 

div 태그 위치 이동을 위해 코드를 추가해 보겠습니다. 

 

우선 prependTo 함수와 parent 함수는 jQuery에서 제공되는 DOM 조작을 위한 함수입니다. 

그래서 jQuery를 사용하셔야합니다. 

 

 

[prependTo 함수]

prependTo 함수는 선택한 요소를 지정한 부모 요소의 가장 앞쪽에 추가합니다.

즉, 선택한 요소를 특정 부모 요소의 자식 요소 중 가장 첫 번째로 위치하도록 이동시킵니다.

사용법은 다음과 같습니다

$(선택한 요소).prependTo(부모 요소);

예를 들어, $(".charger_dcdemo").prependTo($(".chargerBox"));는 charger_dcdemo 클래스를 가진 요소를 .chargerBox 클래스를 가진 부모 요소의 가장 앞쪽으로 이동시킵니다.

 

[parent 함수]

parent 함수는 선택한 요소의 부모 요소를 선택합니다.

즉, 선택한 요소의 직계 부모를 가져옵니다.

사용법은 다음과 같습니다

$(선택한 요소).parent();

 

-> 해당 함수는 위의 prependTo  함수의 인자로 부모요소 값을 넣어줘야 하는데 기억을 할 필요 없게 해주는 코드입니다. 

(내가 선택한 요소의 부모 요소 ) 

 

따라서 위의 코드에서 chargerDemo.prependTo(chargerDemo.parent());는 chargerDemo 요소를 그 부모 요소의 가장 앞쪽으로 이동시키는데, chargerDemo.parent()는 chargerDemo의 부모 요소를 선택하고, prependTo 함수를 통해 해당 부모 요소의 가장 앞쪽으로 chargerDemo를 이동시킵니다.

if ($(".count_dcdemo").text() !== "0") {
    // 해당 태그에 active 클래스 추가
    $(".charger_dcdemo").addClass("active");
    $(".dcDemo").addClass("active");
    
    $(".charger_dcdemo").prependTo($(".charger_dcdemo").parent());
    

}

dc 콤보 태그는 3번째 div 태그로 위치하고 있었으나 해당 코드 적용 후 맨 앞으로 나와 있는 것을 볼 수 있습니다.