jQuery "이후" 선택기 질문

Question

이 작업을 수행하는 좋은 방법을 찾을 수 없는 것 같지만 간단해야 할 것 같습니다.div를 추가하고 싶은 요소가 있습니다.그런 다음 복제하여 해당 중간 div에 삽입하려는 또 다른 요소가 있습니다.제가 하고 싶었던 일은 다음과 같습니다.

$("#somediv > ul").after("<div id='xxx'></div>").append($("#someotherdiv").clone());

가까운 것 같지만 꼭 그렇지는 않습니다.이것의 문제는 "append"가 원래의 "#somediv > ul" 선택기에서 작동하는 것 같다는 것입니다.이런 종류의 의미는 있지만 내가 원하는 것은 아닙니다."after"로 추가한 중간 div를 가장 효율적으로 선택하고 "#someotherdiv"를 여기에 넣을 수 있는 방법은 무엇입니까?

Answer 1

반대 방향으로 가서 사용하세요 insertAfter().

$("<div id='xxx'></div>")
    .append($("#someotherdiv").clone())
    .insertAfter("#somediv > ul")

작업을 마친 후에만 생성된 DOM 노드를 문서에 추가해 보세요.

표시된 문서에 노드가 추가되면 브라우저는 보기를 새로 고치기 위해 변경 사항을 수신하기 시작합니다.표시된 문서에 노드를 추가하기 전에 모든 작업을 수행하면 브라우저 성능이 향상됩니다.

Answer 2

insertAfter()를 사용하십시오:

$("<div id='xxx'></div>").insertAfter("#somediv > ul").append($("#someotherdiv").clone())

Answer 3

"after"로 추가한 중간 div를 가장 효율적으로 선택하고 "#someotherdiv"를 여기에 넣을 수 있는 방법은 무엇입니까?

@Vincent의 솔루션은 아마도 동일한 결과를 얻는 가장 빠른 방법일 것입니다.그러나 어떤 이유로든 div를 추가해야 하는 경우 after() 그런 다음 그것을 선택하고 작업해야 합니다.

.nextAll( [expr] )

Find all sibling elements after the current element.
Use an optional expression to filter the matched set.

따라서 귀하의 js는 다음과 같습니다.

$("#somediv > ul")
    .after("<div id='xxx'></div>")
    .nextAll('#xxx')
    .append($("#someotherdiv").clone());