jQuery로 DIV 요소의 순서를 무작위

해결법

1.

$('div.band div.member');

당신에게

그 클래스 밴드와 사업부의 후손이다 클래스 멤버로 선택 즉 DIV 일치가 포함 된 jQuery를 객체를 제공 할 것입니다.

jQuery 오브젝트는 어레이 형상의 각각의 정합 소자는 수치 속성을 부여하는 것을 목적 물체의 길이 및 속성도 정의된다 (인덱스처럼 생각한다)이다. 하나 개의 요소가 얻으려면

// first element
$('div.band div.member')[0];

또는

// first element
$('div.band div.member').get(0);

대신 모든 요소를 선택하는, 당신은 DOM의 위치에 따라 특정 요소를 선택 지정할 수 있습니다. 예를 들면

// get the first div with class member element
$("div.band div.member:eq(0)")

또는

// get the first div with class member element
$("div.band div.member:nth-child(1)")

편집하다:

여기에 그냥 기절 플러그인입니다

(function($) {

$.fn.randomize = function(childElem) {
  return this.each(function() {
      var $this = $(this);
      var elems = $this.children(childElem);

      elems.sort(function() { return (Math.round(Math.random())-0.5); });  

      $this.detach(childElem);  

      for(var i=0; i < elems.length; i++)
        $this.append(elems[i]);      

  });    
}
})(jQuery);

$ ( '버튼'). ((기능을 클릭) { $ ( "div.band") RANDOMIZE ( "테이블 그럴 TD", "div.member."); }); (함수 ($) { $ .fn.randomize = 기능 (나무, childElem) { () {this.each (함수 복귀 VAR는이 $ (이) = $; (나무)이 $ (이) .find (트리) = $ 경우; var에 unsortedElems = $ this.children (childElem); VAR의 elems unsortedElems.clone = (); elems.sort (함수 () { 리턴 (Math.round (인 Math.random ()) - 0.5); }); 경우 (나는

<표>

레논

매카트니

조지

해리슨

링고
스타 <버튼> 임의 화

다음은 편집 작업 데모입니다. 코드를 볼 수있는 URL에 추가 / 수정. 당신이 어떻게 작동하는지에 대한 정보가 필요한 경우, 댓글을 남겨주세요. 아마 특정 상황을 처리 할보다 강력한 만들어지고 함께 할 수있는 (있을 경우 jQuery를 다른 자식 elems 객체처럼 플러그인 chianed에)하지만 필요에 맞게 것이다.
2.나는 선택은 선택 사항이 될 수 있도록 러스 캠의 솔루션을 수정하고, 각 무작위 요소의 부모를 유지하면서 기능은 여러 개의 컨테이너 요소를 호출 할 수 있습니다.

나는 선택은 선택 사항이 될 수 있도록 러스 캠의 솔루션을 수정하고, 각 무작위 요소의 부모를 유지하면서 기능은 여러 개의 컨테이너 요소를 호출 할 수 있습니다.

예를 들어, 내가 원한다면 내의 모든 LI 필드를 랜덤 화하기 위해 각각 '.member'사업부, 나는 이런 식으로 호출 할 수 있습니다 :
```
$('.member').randomize('li');
```
또한 이런 식으로 할 수 있습니다 :
```
$('.member li').randomize();
```
두 가지 방법이 전화를 그래서 다음과 같습니다 :
```
$(parent_selector).randomize(child_selector);
```
또는
```
$(child_selector).randomize();
```
다음은 수정 된 코드는 다음과 같습니다
```
$.fn.randomize = function(selector){
    (selector ? this.find(selector) : this).parent().each(function(){
        $(this).children(selector).sort(function(){
            return Math.random() - 0.5;
        }).detach().appendTo(this);
    });

    return this;
};
```
축소 된 :
```
$.fn.randomize=function(a){(a?this.find(a):this).parent().each(function(){$(this).children(a).sort(function(){return Math.random()-0.5}).detach().appendTo(this)});return this};
```

3.무작위 항상 요소를 무작위로하지 않는 종류의 사용. 내가 배열 셔플 수있는 방법의 하나처럼 셔플 방법을 사용하는 것이 좋습니다?

무작위 항상 요소를 무작위로하지 않는 종류의 사용. 내가 배열 셔플 수있는 방법의 하나처럼 셔플 방법을 사용하는 것이 좋습니다?

여기 내 업데이트 된 코드입니다

(function($) {
    $.fn.randomize = function(childElem) {
        function shuffle(o) {
            for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
            return o;
        };
        return this.each(function() {
            var $this = $(this);
            var elems = $this.children(childElem);

            shuffle(elems);

            $this.detach(childElem);  

            for(var i=0; i < elems.length; i++) {
                $this.append(elems[i]);      
            }
        });    
    }
})(jQuery);

from https://stackoverflow.com/questions/1533910/randomize-a-sequence-of-div-elements-with-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 CSS3 / 자바 스크립트와 스타일 "입력 파일"에? [복제] (0)	2020.10.19
[JQUERY] 어떻게 단 한번의 클릭 이벤트를 두 번 클릭 이벤트를 차별화? (0)	2020.10.19
[JQUERY] 언제, 왜 자바 스크립트에서 '반환 거짓'에? (0)	2020.10.19
[JQUERY] XMLHttpRequest 객체는 jQuery로 URL을로드 할 수 없습니다 (0)	2020.10.19
[JQUERY] jQuery를 AJAX를 쿼리에서 내 JSON을 구문 분석 할 것 (0)	2020.10.19

복붙노트

[JQUERY] jQuery로 DIV 요소의 순서를 무작위

jQuery로 DIV 요소의 순서를 무작위

해결법

1.

2.나는 선택은 선택 사항이 될 수 있도록 러스 캠의 솔루션을 수정하고, 각 무작위 요소의 부모를 유지하면서 기능은 여러 개의 컨테이너 요소를 호출 할 수 있습니다.

3.무작위 항상 요소를 무작위로하지 않는 종류의 사용. 내가 배열 셔플 수있는 방법의 하나처럼 셔플 방법을 사용하는 것이 좋습니다?

'JQUERY' 카테고리의 다른 글

티스토리툴바