如何使用jQuery仅选择TreeView的同级分支

Question

我有一个使用Telerik的KendoUI的多级树视图，我正在尝试为重新排序的节点的分支获取正确的Id。

    <ul id="root">
    <li>Item 1 (1)<input type="hidden" name="PresetItemId" value="1" />
        <ul>
            <li>Item 1.1 (5)<input type="hidden" name="PresetItemId" value="5" /></li>
            <li>Item 1.2 (6)<input type="hidden" name="PresetItemId" value="6" />
                <ul>
                    <li>Item 1.2.1 (11)<input type="hidden" name="PresetItemId" value="11" /></li>
                    <li>Item 1.2.2 (12)<input type="hidden" name="PresetItemId" value="12" /></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Item 2 (2)<input type="hidden" name="PresetItemId" value="2" />
        <ul>
            <li>Item 2.1 (7)<input type="hidden" name="PresetItemId" value="7" />
                <ul>
                    <li>Item 2.1.1 (13)<input type="hidden" name="PresetItemId" value="13" />
                        <ul>
                            <li>Item 2.1.1.1 (18)<input type="hidden" name="PresetItemId" value="18" /></li>
                        </ul>
                    </li>
                    <li>Item 2.1.2 (14)<input type="hidden" name="PresetItemId" value="14" /></li>
                </ul>
            </li>
            <li>Item 2.2 (8)<input type="hidden" name="PresetItemId" value="8" />
                <ul>
                    <li>Item 2.2.1 (15)<input type="hidden" name="PresetItemId" value="15" /></li>
                </ul>
            </li>
            <li>Item 2.3 (27)<input type="hidden" name="PresetItemId" value="27" /></li>
        </ul>
    </li>
    <li>Item 3 (3)<input type="hidden" name="PresetItemId" value="3" />
        <ul>
            <li>Item 3.1 (9)<input type="hidden" name="PresetItemId" value="9" />
                <ul>
                    <li>Item 3.1.1 (16)<input type="hidden" name="PresetItemId" value="16" /></li>
                </ul>
            </li>
            <li>Item 3.2 (10)<input type="hidden" name="PresetItemId" value="10" />
                <ul>
                    <li>Item.3.2.1 (23)<input type="hidden" name="PresetItemId" value="23" /></li>
                </ul>
            </li>
            <li>Item 3.3 (19)<input type="hidden" name="PresetItemId" value="19" />
                <ul>
                    <li>Item.3.3.1 (24)<input type="hidden" name="PresetItemId" value="24" /></li>
                </ul>
            </li>
            <li>Item 3.4 (20)<input type="hidden" name="PresetItemId" value="20" />
                <ul>
                    <li>Item.3.4.1 (25)<input type="hidden" name="PresetItemId" value="25" /></li>
                </ul>
            </li>
            <li>Item 3.5 (21)<input type="hidden" name="PresetItemId" value="21" />
                <ul>
                    <li>Item.3.5.1 (28)<input type="hidden" name="PresetItemId" value="28" /></li>
                </ul>
            </li>
            <li>Item 3.6 (22)<input type="hidden" name="PresetItemId" value="22" />
                <ul>
                    <li>Item.3.6.1 (26)<input type="hidden" name="PresetItemId" value="26" /></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Item 4 (4)<input type="hidden" name="PresetItemId" value="4" /></li>
</ul>

我的想法是，每个父级都包含子项，并且这些子项是从 TreeView 中的任何其他分支独立排序的。

因此，我需要抓取节点放置到的分支的所有同级，并在对节点进行排序时仅获取该分支级别的 id。 如果这些节点中的任何一个有子节点，我不希望这些节点成为 Id 集合的一部分。

我让它在某种程度上工作，但它返回了所有兄弟姐妹(这是正确的(，但也返回了这些兄弟姐妹的所有孩子(这是不正确的(。

var treeview;
function onTreeViewDragEnd(e){
    var console = $("#console");
    //alert("source: " + treeview.text(e.sourceNode));
    //alert("destination: " + treeview.text(e.destinationNode));
    var list = $(e.destinationNode).siblings().not($(this).children());
    var data = $("input", list).serialize();
    console.html(JSON.stringify(data));
}

treeview = $("#root").kendoTreeView({
    dragAndDrop : true,
    dragend: onTreeViewDragEnd
}).data("kendoTreeView");

我对此进行了研究：http://jsfiddle.net/kahanu/PdaRg/1/

要使用此示例，只需展开一个节点，然后将其放在同一分支上的其他地方，它将显示分支(和子项(的隐藏输入值，这不是我想要的。

任何帮助为我指明正确的方向，我们将不胜感激。

谢谢。

Answer 1

这并不是说您获取的节点比您需要的要多，而是您在节点下的任何级别搜索input。

var list = $(e.destinationNode).siblings();
var data = list.children("div").find("input").serialize();