2016-10-28 3 views
0

내 문제는이 최상위 수준을 lispan 내용을 수정하는 것입니다 부모 리튬의 자식 UL의 요소를 받고 각 없습니다. li 다른 ul을 보유하면 그것은 내 그 span의를 찾을 수없는 내부. jQuery 셀렉터가 저의 상위 레벨`div`` 아래에있는 모든 ".fancytree-node" 요소를 가져올 것이라고 생각했습니다.jQuery를이

내가 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"> 
 
    \t \t \t \t <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"> 
 
    \t \t \t \t <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"> 
 
    \t \t \t \t <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"> 
 
    \t \t \t \t \t \t <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"> 
 
    \t \t \t \t \t \t <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"> 
 
    \t \t \t \t \t \t <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>

+0

당신은 U 원하는 HTML 출력에 대한 예를 정의 할 수 있습니까? 당신은 당신이 당신은 스팬이 지난 리튬에 중첩 사람 대 최상위 리 요소에 다른 방법을 볼'# treeDestinationFancy' –

+0

밖으로 모든'.fancytree-node'을 얻고 싶은 것을 의미합니까? 나는 그 아이 ul 안에있는 범위의 위치를 ​​뒤집어 쓰려고합니다. – Naomarius

답변

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>

+0

이 작업을 수행하지만 같은 페이지에 두 번째 트리 뷰를 사용하여 시도하고 하나에 같은 일을하고 나는 그것이 한 번에 하나의 나무에 영향을 가질 필요가있다. 당신은 정확하지만 한 번에 하나의 트리에만 선택자를 어떻게 제한합니까? – Naomarius

+0

그냥 다시 실제 코드는 약간 다르지만 내 환경에서는 이것이 작동하지 않습니다. 나는 갈등이 있을지 모르지만 나는 어디 있는지 모른다. – Naomarius

+0

하지만이 질문에 제공 한 코드와 제대로 작동합니까? 다른 코드로 다른 질문이있는 경우 별도로 질문하십시오. –

0

괜찮은가은 문제를 얻었다. 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> 
+0

그건 약간의 복사 파스타 실수 내 잘못입니다. 그러나 공간이 있더라도 나는 여전히 마지막 주 리 내의 ul 목록 아래에 어떤 노드라도 치지 못합니다. – Naomarius

+0

나는 귀하의 우려 사항에 따라 코드를 편집했습니다. 현재 잘 작동 중입니다. LI로 모든 내부 UL을 랩핑해야합니다. –

+0

'li'은 다른'li'을 포함 할 수 없습니다. 'li'는'ul'을 감싸 줘야합니다. 이 모든 코드는 두 번째'ul'은'리 클래스 = "fancytree-lastsib"의 형제 중이다 있도록 계층 구조를 변화 않는' –