jQuery를 사용하여 달성하고 싶은 것은 페이지로드시 다음 섹션의 위치를 두 가지 방법으로 재배 열하는 것입니다. 첫 번째는 데이터 순서 값을 오름차순으로 정렬하고 다른 하나는이 정렬에있을 배열을 통해 정렬하는 것입니다. 3-1-2
이것이 어떻게 달성 될 수 있습니까?
<section class="aboutus" data-order="1">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>content here</p>
</div>
</div>
</div>
</section>
<section class="questions" data-order="3">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>content here</p>
</div>
</div>
</div>
</section>
<section class="contact" data-order="2">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>content here</p>
</div>
</div>
</div>
</section>
나는 이것을 위해 배열을 사용하는이 코드를 찾았지만 특정 클래스가 필요하지만 가능한 한 보편적이고 클래스 또는 ID가 필요하지 않습니다.
var myArray = ['2', '3', '1'];
var elArray = [];
$('.imgs').each(function() {
elArray[$(this).data('image-id')] = $(this);
});
$.each(myArray,function(index,value){
$('#container').append(elArray[value]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='container'>
<div class="imgs" data-image-id='1'>1</div>
<div class="imgs" data-image-id='2'>2</div>
<div class="imgs" data-image-id='3'>3</div>
</div>
시험
// elements
var elems = $("[data-order]");
// ordering map
var elArray = ["3", "1", "2"];
// replace `elems` `outerHTML`
$.map(elArray, function(order, i) {
var el = elems.filter(function() {
// ie < 11 does not appear to support `dataset`
// jQuery `.data()` appear to cast `String` "3" to `Number` `3`
// utilize equality operator `==` to convert operands
return $(this).data("order") == order
});
elems.eq(i)[0].outerHTML = el[0].outerHTML
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="aboutus" data-order="1">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>content here 1</p>
</div>
</div>
</div>
</section>
<section class="questions" data-order="3">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>content here 3</p>
</div>
</div>
</div>
</section>
<section class="contact" data-order="2">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>content here 2</p>
</div>
</div>
</div>
</section>jsfiddle http://jsfiddle.net/saf77L4w/4/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다