jquery 위 아래로 순서 변경 - OhMinsSup/tip-review GitHub Wiki

<div id="wrap">
  <div class="listDiv" id="a1">
    <span class="UDbtn"><b class="Ubtn">▲</b><br><b class="Dbtn">▼</b></span><span class="value">1</span>
  </div>
  <div class="listDiv" id="a2">
    <span class="UDbtn"><b class="Ubtn">▲</b><br><b class="Dbtn">▼</b></span><span class="value">2</span>
  </div>
  <div class="listDiv" id="a3">
    <span class="UDbtn"><b class="Ubtn">▲</b><br><b class="Dbtn">▼</b></span><span class="value">3</span>
  </div>
  <div class="listDiv" id="a4">
    <span class="UDbtn"><b class="Ubtn">▲</b><br><b class="Dbtn">▼</b></span><span class="value">4</span>
  </div>
  <div class="listDiv" id="a5">
    <span class="UDbtn"><b class="Ubtn">▲</b><br><b class="Dbtn">▼</b></span><span class="value">5</span>
  </div>
</div>
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font: 12px arial;
  word-break: break-all;
}
#wrap {
  border: 1px solid #ccc;
}
.listDiv {
  padding: 10px 0 10px 20px;
  position: relative;
  border: 1px solid #ddd;
}
.UDbtn {
  position: absolute;
  left: 4px;
  top: 6px;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}
$(".Ubtn").on("click", function () {
  var srcDiv = $(this).parents(".listDiv");
  var tgtDiv = srcDiv.prev();
  if (tgtDiv[0]) {
    tgtDiv.before(srcDiv);
  }
  var order = getOrder(".listDiv", $("#wrap")[0]);
  console.log(order);
});

$(".Dbtn").on("click", function () {
  var srcDiv = $(this).parents(".listDiv");
  var tgtDiv = srcDiv.next();
  if (tgtDiv[0]) {
    tgtDiv.after(srcDiv);
  }
  var order = getOrder(".listDiv", $("#wrap")[0]);
  console.log(order);
});

function getOrder(selector, container) {
  var order = [];
  $(selector, container).each(function () {
    order.push(this.id);
  });
  return order;
}
⚠️ **GitHub.com Fallback** ⚠️