JQuery 仅可排序在顶部 <li>

Question

我在想办法告诉 jquery sortable 只适用于最上面的 li。

<ul id="sortable">
<li id="1">first text
    <ol>
        <li>Just some text
        </li>
        <li>Some more text
            <li>
    </ol>
</li>
<li id="2">second text
</li>

我正在尝试使用基于 "id"

的排序顺序填充隐藏字段

function fnOrder() {
        var mSortResultsAry = [];
        $("#sortable li").each(function (index) {
            mSortResultsAry.push(this.id);
        });
        $("[id$=hfResults]").val(mSortResultsAry.join(","));

    }

现在发生的事情是，当它沿着 DOM 下降时，它到达

Just some text

并赋予它一个值“”。我想让它只遍历最上面的

。

Answer 1

您可以使用 #sortable 个中的 .children() 个。

var mSortResultsAry = [];

$('#sortable').children().each(function(){
  mSortResultsAry.push(this.id);
});

console.log(mSortResultsAry);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="sortable">
  <li id="1">first text
      <ol>
          <li>Just some text
          </li>
          <li>Some more text
              <li>
      </ol>
  </li>
  <li id="2">second text
  </li>
 </ul>

甚至搜索具有 ID 的 <li>。

var mSortResultsAry = [];

$('li[id]').each(function(){
  mSortResultsAry.push(this.id);
});

console.log(mSortResultsAry);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="sortable">
  <li id="1">first text
      <ol>
          <li>Just some text
          </li>
          <li>Some more text
              <li>
      </ol>
  </li>
  <li id="2">second text
  </li>
 </ul>

JQuery 仅可排序在顶部 <li>

JQuery sortable on the top <li> only

jquery

jquery-ui-sortable