나는 jquery로 조금 고심하고 있습니다. 다음과 같은 순서없는 목록이 있습니다.
<ul>
<li class="folder">Folder: Test</li>
<ul>
<li class="folder">Folder: Archive</li>
<ul>
<li class="file">
<div class="filename">HelloWorld.docx</div>
<div class="size">11.79kiB</div>
<div class="date">2021-01-12 09:31:34</div>
</li>
<li class="file">
<div class="filename">HelloWorld1.docx</div>
<div class="size">12.79kiB</div>
<div class="date">2021-01-11 09:31:34</div>
</li>
</ul>
</ul>
</ul>
이렇게 생겼어요
"file"클래스가있는 li를 클릭하면 "folder"클래스가있는 부모 li를 찾아 경로 구조가 무엇인지 되돌아보고 알아 내고 싶습니다.
다양한 조합을 시도했지만 얻을 수 없습니다
이것이 제가 현재 작업하고있는 것입니다.
$(document.body).on('click',"li.file",function (e) {
console.log("clicked");
$(this).parents("li.folder").each(function() {
console.log($(this).text());
});
});
궁극적으로 부모 폴더와 변수의 파일 이름이있는 전체 경로를 되찾고 싶습니다.
예 : pathtofile = /Test/Archive/HelloWorld.docx
여기 jsfiddle https://jsfiddle.net/e5d7bcyz/ 감사합니다
질문에 접근하기 전에 먼저 HTML을 수정해야합니다. ul요소는 다른 ul요소의 자식 일 수 없습니다 . 당신은 포장 할 필요가 ul관련된 자신의 내 li.
또한 span텍스트를 쉽게 검색 할 수 있도록 폴더 이름을과 같은 다른 요소로 래핑해야합니다 . 이것은 텍스트 노드를 통해 트롤링하여 현재 HTML에서 가능할 수 있지만 작성하기가 지저분하고 매우 취약합니다. 간단한 HTML 변경이 가장 좋은 방법입니다.
마지막으로 li클릭 한 상위 요소를 반복 .file하고 순서를 반대로하여 경로를 올바른 형식으로 얻을 수 있습니다. 여기에서 선택한 파일의 파일 이름을 추가 할 수 있습니다. 이 시도:
$.fn.reverse = [].reverse;
$(document).on('click', "li.file", function(e) {
let $file = $(this);
let $path = $file.parent().parents('li').reverse();
let path = $path.map((i, el) => $(el).children('span').text().trim()).get();
path.push($file.children('.filename').text().trim());
console.log(path.join('/'));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="folder">
<span>Test</span>
<ul>
<li class="folder">
<span>Archive</span>
<ul>
<li class="file">
<div class="filename">HelloWorld.docs</div>
<div class="size">11.79kiB</div>
<div class="date">2021-01-12 09:31:34</div>
</li>
<li class="file">
<div class="filename">HelloWorld1.docs</div>
<div class="size">12.79kiB</div>
<div class="date">2021-01-11 09:31:34</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다