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

Question

我的问题是修改了顶级li span内容。当li在其中包含另一个ul时，它内部找不到span个".fancytree-node"。我认为jQuery选择器会在我的高级`div``下得到所有$(function() { $("#treeDestinationFancy .fancytree-icon").each(function() { $(this).appendTo($(this).parent()); }); $("#treeDestinationFancy .fancytree-expander").each(function() { $(this).appendTo($(this).parent()); }); });个元素。

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

jQuery和HTML：

＆＃13;

＆＃13;

<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>

＆＃13;

{
  "aggs": {
    "query": {
      "terms": {
        "field": "name"
      }
     ,
      "aggs": {
        "top": {
          "top_hits": {
            "size": 1
          }
        }


      }
    }
  },
  "size": 0,
  "query": {

          "multi_match": {
            "query": "laura",
            "operator": "OR",
            "fields": [

              "name"

            ]
          }
  }
}

＆＃13;

＆＃13;

＆＃13;

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>