CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Naomarius
Naomarius

Reputation: 35

jQuery each not getting elements in child ul of parent li

My issue is this modifies the top level li span contents. When the li holds another ul inside it does not find those spans within. I thought the jQuery selector would get me all ".fancytree-node" elements under my high level `div``.

I'm using jQuery 1.11.1. I've tried to change my selector and use many different methods but all gave me the same result as this jQuery statement.

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

Upvotes: 0

Views: 181

Answers (2)

Heretic Monkey
Heretic Monkey

Reputation: 12113

I think I'm seeing what you're trying to do. You want each node to have the three children in the order "fancytree-title", "fancytree-icon", "fancytree-expander". You just need to change your selector so that it's selecting from the parent node, rather than the ancestor node.

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

Upvotes: 1

web developer
web developer

Reputation: 136

ok.I got your issue. You must wrap every inner ULs with an LI, I had update code below.It is working fine.Please check.

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

Upvotes: 0

Related Questions