javascript - jQuery 每个都没有在父 li 的子 ul 中获取元素

Question

我的问题是这修改了顶级 li span 内容。当 li 包含另一个 ul 时，它不会在其中找到那些 span。我认为 jQuery 选择器会在我的高级 `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>