jQuery在父元素li的子元素ul中都没有得到元素

jQuery each not getting elements in child ul of parent li

本文关键字：元素 li jQuery ul 更新时间：2023-09-26

我的问题是这修改了顶级li span的内容。当li容纳另一个ul时，它找不到里面的span。我认为jQuery选择器会让我所有的".fancytree-node"元素在我的高级'div ' '。

我使用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>

我想我明白你的意思了。您希望每个节点有三个子节点，顺序为"fanytree -title"、"fanytree -icon"、"fanytree -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>

ok。我知道你的问题。您必须用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>