[javascript] JQuery .each () 뒤로

JAVASCRIPT / 글쓴이

JQuery를 사용하여 페이지에서 일부 요소를 선택한 다음 DOM에서 요소를 이동합니다. 내가 겪고있는 문제는 JQuery가 자연스럽게 선택하려는 역순으로 모든 요소를 ​​선택해야한다는 것입니다. 예를 들면 다음과 같습니다.

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
</ul>

모든 li 항목을 선택하고 .each () 명령을 사용하고 싶지만 Item 5부터 시작한 다음 Item 4 등으로 시작하고 싶습니다. 이것이 가능합니까?

답변

$($("li").get().reverse()).each(function() { /* ... */ });

답변

나는 세계에서 가장 작은 jquery 플러그인 형태로 가장 깨끗한 방법을 제시합니다.

jQuery.fn.reverse = [].reverse;

용법:

$('jquery-selectors-go-here').reverse().each(function () {
    //business as usual goes here
});

그의 게시물에 마이클 기어 리에 대한 모든 크레딧 : http://www.mail-archive.com/discuss@jquery.com/msg04261.html

답변

넌 할 수있어

jQuery.fn.reverse = function() {
    return this.pushStack(this.get().reverse(), arguments);
};

뒤에

$(selector).reverse().each(...)

답변

이에 대한 다른 옵션은 다음과 같습니다.

첫 번째 : jQuery없이 :

var lis = document.querySelectorAll('ul > li');
var contents = [].map.call(lis, function (li) {
    return li.innerHTML;
}).reverse().forEach(function (content, i) {
    lis[i].innerHTML = content;
});

여기 데모

… 그리고 jQuery와 함께 :

이것을 사용할 수 있습니다 :

$($("ul > li").get().reverse()).each(function (i) {
    $(this).text( 'Item ' + (++i));
});

여기 데모

jQuery를 반대로 사용하는 또 다른 방법 은 다음 과 같습니다.

$.fn.reverse = [].reverse;
$("ul > li").reverse().each(function (i) {
    $(this).text( 'Item ' + (++i));
});

이 데모는 여기에 있습니다 .

또 다른 대안은 length(선택자와 일치하는 요소 수)를 사용하고 index각 반복을 사용하여 그 아래로 내려가는 것 입니다. 그런 다음 이것을 사용할 수 있습니다 :

var $li = $("ul > li");
$li.each(function (i) {
    $(this).text( 'Item ' + ($li.length - i));
});

이 데모 여기

하나 는 위의 것과 관련이 있습니다.

var $li = $("ul > li");
$li.text(function (i) {
    return 'Item ' + ($li.length - i);
});

여기 데모

답변

역 플러그인을 작성하는 것을 선호합니다.

jQuery.fn.reverse = function(fn) {
   var i = this.length;

   while(i--) {
       fn.call(this[i], i, this[i])
   }
};

사용 예 :

$('#product-panel > div').reverse(function(i, e) {
    alert(i);
    alert(e);
});

답변

jQuery.fn에 메소드를 저장하지 않으려면

[].reverse.call($('li'));

답변

Vinay 아이디어를 사용 했으므로 $ .each에 대한 역전이 필요했습니다.

//jQuery.each(collection, callback) =>
$.each($(collection).get().reverse(), callback func() {});

잘 했어, 고마워