플립 초 사업부와 세 번째 사업부

나는 네 개의 사업부를 가지고 내 쿼리 내가 출력이 1324 대신 1234플립 초 사업부와 세 번째 사업부

<div class="bar"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
</div>

$(document).ready(function() { 
    reverseChildren($('.bar')); 
    if (document.body.offsetWidth < 600) { 
     function reverseChildren($parent) { 
      var listItems = $parent.children('div'); 
      console.log(listItems); 
      $parent.append(listItems.get().reverse()); 
     }; 
    } 
});

출처

2014-09-12 Ashish Singh

왜 'if'문에서 함수를 정의하고 있습니까? 귀하의 코드는 매우 이상합니다. –

다음에 코드 서식/들여 쓰기를 개선하고 쉽게 테스트 할 수 있도록 jsfiddle을 추가하십시오. –

@RoryMcCrossan 화면의 너비가 600이면이 코드가 실행되지만 문제는 실행되지만 출력은 4321이되고 1324가 필요하기 때문에 조건을 정의했습니다 .plpl이 나를 제안합니다 –

의 방법으로 와야 초 사업부와 세 번째 DIV의 순서를 교체 할 것입니다

우선, 함수 호출을 if 문 내에서 래핑했습니다. 이는 매우 이상합니다. if 문을 사용하여 함수 호출을 래핑하고 함수 호출 자체를 전역 적으로 사용할 수 있도록해야합니다. 둘째

: 당신의 기능은 이제 모든 아이를 선택하고 만 두의 마지막 항목을 선택합니다 동안 그렇게 같은 immedeate 이전 형제이기 전에 당신이 그것을 반대하고 추가하고 싶은 그들을 반전 :

HTML

<div class="bar"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
</div>

자바 스크립트

function reverseChild($parent, index) 
{ 
    // Retrieve the child item with the supplied (ZERO BASED!) index 
    var childItem = $parent.children('div:eq(' + index + ')'); 

    // Place it in front of it's immedeate previous sibling. 
    childItem.prev().before(childItem); 
}; 

$(document).ready(function() 
{ 
    reverseChild($('.bar'), 2); 
});

JSFiddle 데모 : http://jsfiddle.net/mpcowmpb/

이 주를 수행합니다 나는 몸의 적은 폭 내에서 그 데모로 JSFiddle 데모 내 document.body.offsetWidth 체크를 제거했습니다.

출처

2014-09-12 06:47:32

도움을 청하는 @Dennis Jamin –

@AshishSingh 질문을 해결하면 대답을 수락하십시오. –

결과 DOM 구조가 올바르지 않습니다. 또한 내 대답에 나타났습니다. @ DanArl 's가 트릭을 수행함에 따라 삭제했습니다. 구조가 정확하도록 업데이트하십시오. –

jQuery's before method을 사용하여 두 요소의 위치를 바꿀 수 있습니다.

$('.bar div:nth-child(2)').before($('.bar div:nth-child(3)'));

여기에 html을 사용하는 jsfiddle입니다. 문 당신이 문 경우 외부에서 함수를 호출하려는 경우 경우

또한, 함수 선언은 내부 안된다.

출처

2014-09-12 06:57:58 DanArl

플립 초 사업부와 세 번째 사업부

답변

관련 문제