jQuery每个未在父级li的子ul中获取元素

Question

我的问题是，这会修改顶级li span内容。 当li在其中包含另一个ul ，不会在其中找到这些span 。 我以为jQuery选择器会将我所有的".fancytree-node"元素都放在我的高级“ div ".fancytree-node"下。

我正在使用jQuery 1.11.1。 我试图更改选择器并使用许多不同的方法，但是所有方法都给我与该jQuery语句相同的结果。

jQuery和HTML：

 $(function() { $("#treeDestinationFancy .fancytree-icon").each(function() { $(this).appendTo($(this).parent()); }); $("#treeDestinationFancy .fancytree-expander").each(function() { $(this).appendTo($(this).parent()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="treeDestinationFancy "> <ul> <li> <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> <span class="fancytree-title">[Drag here]</span> <img class="fancytree-icon" alt="" src="/Images.gif"> <span class="fancytree-expander"></span> </span> </li> <li> <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> <span class="fancytree-title">this item</span> <img class="fancytree-icon" alt="" src="/Images.gif"> <span class="fancytree-expander"></span> </span> </li> <li class="fancytree-lastsib"> <span class="fancytree-node fancytree-expanded fancytree-has-children fancytree-lastsib fancytree-exp-el fancytree-ico-e"> <span class="fancytree-title">Forward</span> <img class="fancytree-icon" alt="" src="/Images.gif"> <span class="fancytree-expander"></span> </span> <ul> <li> <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> <span class="fancytree-expander"></span> <img class="fancytree-icon" alt="" src="/Images.gif"> <span class="fancytree-title">Host with Protocol</span> </span> </li> <li> <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> <span class="fancytree-expander"></span> <img class="fancytree-icon" alt="" src="/Images.gif"> <span class="fancytree-title">Audit Guid</span> </span> </li> <li> <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> <span class="fancytree-expander"></span> <img class="fancytree-icon" alt="" src="/Images.gif"> <span class="fancytree-title">Contact:Email [InnerText]</span> </span> </li> </ul> </li> </ul> </div> 

Answer 1

我想我正在了解您要做什么。 您希望每个节点按“ fancytree-title”，“ fancytree-icon”，“ fancytree-expander”的顺序具有三个子级。 您只需要更改选择器，以使其从父节点而不是祖先节点中进行选择即可。

 $(function() { $(".fancytree-node .fancytree-icon").each(function() { $(this).appendTo($(this).parent()); }); $(".fancytree-node .fancytree-expander").each(function() { $(this).appendTo($(this).parent()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="treeDestinationFancy "> <ul> <li> <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> <span class="fancytree-title">[Drag here]</span> <img class="fancytree-icon" alt="" src="/Images.gif"> <span class="fancytree-expander"></span> </span> </li> <li> <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> <span class="fancytree-title">this item</span> <img class="fancytree-icon" alt="" src="/Images.gif"> <span class="fancytree-expander"></span> </span> </li> <li class="fancytree-lastsib"> <span class="fancytree-node fancytree-expanded fancytree-has-children fancytree-lastsib fancytree-exp-el fancytree-ico-e"> <span class="fancytree-title">Forward</span> <img class="fancytree-icon" alt="" src="/Images.gif"> <span class="fancytree-expander"></span> </span> <ul> <li> <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> <span class="fancytree-expander"></span> <img class="fancytree-icon" alt="" src="/Images.gif"> <span class="fancytree-title">Host with Protocol</span> </span> </li> <li> <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> <span class="fancytree-expander"></span> <img class="fancytree-icon" alt="" src="/Images.gif"> <span class="fancytree-title">Audit Guid</span> </span> </li> <li> <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> <span class="fancytree-expander"></span> <img class="fancytree-icon" alt="" src="/Images.gif"> <span class="fancytree-title">Contact:Email [InnerText]</span> </span> </li> </ul> </li> </ul> </div> 

Answer 2

好的，我知道了。 您必须使用LI将每个内部UL包裹起来，下面是我的更新代码，它工作正常，请检查。

<div id="treeDestinationFancy">
    <ul>
        <li>
            <span class="fancytree-node fancytree-exp-n fancytree-ico-c">
                <span class="fancytree-title">[Drag here]</span>
                <img class="fancytree-icon" alt="" src="/Images.gif">
                <span class="fancytree-expander"></span>
            </span>
        </li>
        <li>
            <span class="fancytree-node fancytree-exp-n fancytree-ico-c">
                <span class="fancytree-title">this item</span>
                <img class="fancytree-icon" alt="" src="/Images.gif">
                <span class="fancytree-expander"></span>
            </span>
        </li>
        <li class="fancytree-lastsib">
            <span class="fancytree-node fancytree-expanded fancytree-has-children fancytree-lastsib fancytree-exp-el fancytree-ico-e">
                <span class="fancytree-title">Forward</span>
                <img class="fancytree-icon" alt="" src="/Images.gif">
                <span class="fancytree-expander"></span>
            </span>
            <li>
            <ul>
                <li>
                    <span class="fancytree-node fancytree-exp-n fancytree-ico-c">
                        <span class="fancytree-expander"></span>
                        <img class="fancytree-icon" alt="" src="/Images.gif">
                        <span class="fancytree-title">Host with Protocol</span>
                    </span>
                </li>
                <li>
                    <span class="fancytree-node fancytree-exp-n fancytree-ico-c">
                        <span class="fancytree-expander"></span>
                        <img class="fancytree-icon" alt="" src="/Images.gif">
                        <span class="fancytree-title">Audit Guid</span>
                    </span>
                </li>
                <li>
                    <span class="fancytree-node fancytree-exp-n fancytree-ico-c">
                        <span class="fancytree-expander"></span>
                        <img class="fancytree-icon" alt="" src="/Images.gif">
                        <span class="fancytree-title">Contact:Email [InnerText]</span>
                    </span>
                </li>
            </ul>
        </li>
        </li>
    </ul>
</div>