jQuery_jquery에서 DOM 트리 연산을 위한 역삽입 방식을 사용한 분석 예

본 글의 예시에서는 jQuery에서 DOM 트리 연산의 역삽입 방식을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

역삽입 방식을 사용하세요

여기에서는 먼저 생성된 콘텐츠를 요소 앞에 삽입한 다음 동일한 요소를 문서의 다른 위치에 삽입합니다. 일반적으로 jQuery에서 요소를 조작할 때는 연결 방법을 사용하는 것이 더 간결하고 효율적입니다. 그러나 이것이 .insertBefore()의 대상이고 .appendTo()의 내용이기 때문에 지금은 이를 수행할 방법이 없습니다. 이때 역삽입 방식을 사용하면 문제 해결에 도움이 될 수 있습니다.

.insertBefore() 및 .appendTo()와 같은 삽입 메서드에는 일반적으로 해당 역방향 메서드가 있습니다. reverse 메소드도 동일한 작업을 수행하지만 "대상"과 "컨텐츠"가 반전됩니다. 예:

코드 복사 코드는 다음과 같습니다.

$('

Hello

'). 추가(' #컨테이너');

결과는 다음 코드와 같습니다.

코드 복사 코드는 다음과 같습니다.

$('#container').append('

안녕하세요');

아래에서는 .insertBefore() 대신 .before()를 사용하여 코드를 재구성합니다. 다음 코드를 참조하세요.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function() {
var $notes = $('

')
.insertBefore('#footer');
$('span.footnote').each(함수(색인) {
$(이것)
.before('^{' (색인 1) '}')
.appendTo($notes)
.wrap('

');
});
});

삽입 메소드 콜백

역방향 삽입 방법은 .attr() 및 .css() 방법과 유사하게 함수를 매개변수로 허용할 수 있습니다. 전달된 함수는 각 대상 요소에 대해 호출되고 삽입된 HTML 문자열을 반환합니다. 이 기술은 실제로 여기서 사용할 수 있지만 각 각주에 대해 동일한 작업을 반복해야 하므로 .each() 메서드를 사용하는 것이 더 명확합니다.

이제 마지막 단계를 고려해 보겠습니다. 텍스트의 해당 위치에 일치하는 각주에 대한 링크와 텍스트의 위치에 대한 각주 링크를 만드는 것입니다. 이를 위해 각 각주에는 4개의 태그가 필요합니다. 두 개의 링크(텍스트에 하나, 각주에 하나), 그리고 두 개의 id 속성이 필요합니다. 이렇게 하면 .before() 메서드에 전달되는 매개변수가 복잡해지기 때문에 여기서 문자열을 생성하는 새로운 방법을 사용할 필요가 있습니다.
위 코드에서는 연산자를 사용하여 문자열을 연결합니다. 연산자를 사용하는데는 문제가 없지만
연결할 문자열이 너무 많으면 지저분해 보입니다. 따라서 여기서는 배열의 .join() 메서드를 사용하여 더 큰 배열을 만듭니다. 즉, 다음 두 줄의 코드는 동일한 결과를 갖습니다.

코드 복사 코드는 다음과 같습니다.

var str = 'a' 'b' 'c';
var str = ['a', 'b', 'c'].join('');

이 예에서는 더 많은 문자를 입력해야 하지만 .join() 메서드를 사용하면 너무 많은 문자열을 연결하여 발생하는 혼란을 피할 수 있습니다. 샘플 코드를 다시 살펴보겠습니다. 다음 코드는 .join()을 사용하여 문자열을 생성하는 과정입니다.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function() {
var $notes = $('

') .insertBefore('#footer') $('span.footnote').each(function(index) { $ (이것)
.이전([
'^{', 인덱스 1,
'}'
].join(''))
.appendTo($notes)
.wrap('

');
});
});

참고 배열의 각 요소는 개별적으로 작업을 수행하므로 인덱스 1을 괄호 안에 넣을 필요가 없습니다. 이 기술을 사용하면 페이지 하단에 링크를 추가하고 바닥글 태그에 고유 ID 값을 추가할 수 있습니다. 동시에 다음 방법에서는 링크가 일치하는 대상을 갖도록 해당 id 속성을

요소에도 추가해야 합니다.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function() {
var $notes = $('

') .insertBefore('#footer') $('span.footnote').each(function(index) { $ (이것)
.이전([
'',
'^{', 인덱스 1,
'}'
].join(''))
.appendTo($notes)
.wrap('

');
});
});

이러한 태그를 추가하면 각 각주 태그에 페이지 하단에 해당 각주에 대한 링크가 포함됩니다. 남은 것은 각주에 해당 컨텍스트에 대한 링크를 만드는 것입니다. 이렇게 하려면 .appendTo()의 반대 메서드인 .append()를 사용할 수 있습니다. 다음 코드를 참조하세요.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function() {
var $notes = $('

'"id="context-', 인덱스 1,
'"클래스 = "컨텍스트__>',
'^{', 인덱스 1,
'}'
].join(''))
.appendTo($notes)
.append([
' (');
});
});

참고 여기의 href는 각주 태그의 ID를 가리킵니다. 실행 결과에서 새 링크가 포함된 각주를 볼 수 있습니다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.