요소의 모든 자손 텍스트 노드를 jQuery 컬렉션으로 가져 오려고합니다. 가장 좋은 방법은 무엇입니까?
답변
jQuery에는 편리한 기능이 없습니다. contents()하위 노드 만 제공하고 텍스트 노드를 포함하는 을 결합해야합니다 .와 함께 find()모든 하위 요소는 제공하지만 텍스트 노드는 제공하지 않습니다. 내가 생각해 낸 것은 다음과 같습니다.
var getTextNodesIn = function(el) {
return $(el).find(":not(iframe)").addBack().contents().filter(function() {
return this.nodeType == 3;
});
};
getTextNodesIn(el);참고 : jQuery 1.7 또는 이전 버전을 사용하는 경우 위 코드는 작동하지 않습니다. 이 문제를 해결하려면, 대신 addBack()에 andSelf(). 1.8 이상에서 andSelf()더 이상 사용되지 않습니다 addBack().
이것은 순수한 DOM 메소드에 비해 다소 비효율적 이며 jQuery의 contents()함수 오버로드에 대한 추악한 해결 방법 을 포함 해야 합니다 (지시 사항에 대한 의견에 @rabidsnail 덕분에) 간단한 재귀 함수를 사용하는 비 jQuery 솔루션입니다. 이 includeWhitespaceNodes매개 변수는 공백 텍스트 노드가 출력에 포함되는지 여부를 제어합니다 (jQuery에서는 자동으로 필터링됩니다).
업데이트 : includeWhitespaceNodes가 잘못된 경우의 버그를 수정했습니다.
function getTextNodesIn(node, includeWhitespaceNodes) {
var textNodes = [], nonWhitespaceMatcher = /\S/;
function getTextNodes(node) {
if (node.nodeType == 3) {
if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
textNodes.push(node);
}
} else {
for (var i = 0, len = node.childNodes.length; i < len; ++i) {
getTextNodes(node.childNodes[i]);
}
}
}
getTextNodes(node);
return textNodes;
}
getTextNodesIn(el);답변
Jauco는 의견에 좋은 해결책을 게시 했으므로 여기에 복사하고 있습니다.
$(elem)
.contents()
.filter(function() {
return this.nodeType === 3; //Node.TEXT_NODE
});답변
$('body').find('*').contents().filter(function () { return this.nodeType === 3; });답변
jQuery.contents()와 함께 사용하여 jQuery.filter모든 하위 텍스트 노드를 찾을 수 있습니다 . 약간의 왜곡으로 손자 텍스트 노드도 찾을 수 있습니다. 재귀가 필요하지 않습니다.
$(function() {
var $textNodes = $("#test, #test *").contents().filter(function() {
return this.nodeType === Node.TEXT_NODE;
});
/*
* for testing
*/
$textNodes.each(function() {
console.log(this);
});
});div { margin-left: 1em; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test">
child text 1<br>
child text 2
<div>
grandchild text 1
<div>grand-grandchild text 1</div>
grandchild text 2
</div>
child text 3<br>
child text 4
</div>답변
허용되는 필터 기능으로 많은 빈 텍스트 노드가 생겼습니다. 공백이 아닌 텍스트 노드 만 선택 nodeValue하려면 다음 filter과 같이 간단한 조건 처럼 함수에 조건을 추가 하십시오 $.trim(this.nodevalue) !== ''.
$('element')
.contents()
.filter(function(){
return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
});또는 내용이 공백처럼 보이지만 (예 : 부드러운 하이픈 ­문자, 줄 바꿈 \n, 탭 등) 이상한 상황을 피하려면 정규식을 사용해보십시오. 예를 들어, \S공백이 아닌 문자와 일치합니다.
$('element')
.contents()
.filter(function(){
return this.nodeType === 3 && /\S/.test(this.nodeValue);
});답변
모든 자식이 요소 노드 또는 텍스트 노드라고 가정 할 수 있다면 이것이 하나의 솔루션입니다.
모든 자식 텍스트 노드를 jquery 컬렉션으로 가져 오려면 :
$('selector').clone().children().remove().end().contents();텍스트가 아닌 자식이 제거 된 원본 요소의 복사본을 얻으려면 :
$('selector').clone().children().remove().end();답변
어떤 이유로 든 contents()나를 위해 작동하지 않았으므로 그것이 효과가 없다면 여기에 만든 해결책 jQuery.fn.descendants이 있습니다. 텍스트 노드를 포함하거나 포함하지 않는 옵션으로 생성 했습니다.
용법
텍스트 노드 및 요소 노드를 포함한 모든 자손 가져 오기
jQuery('body').descendants('all');텍스트 노드 만 반환하는 모든 자손 가져 오기
jQuery('body').descendants(true);요소 노드 만 반환하는 모든 자손을 가져옵니다.
jQuery('body').descendants();커피 스크립트 원본 :
jQuery.fn.descendants = ( textNodes ) ->
# if textNodes is 'all' then textNodes and elementNodes are allowed
# if textNodes if true then only textNodes will be returned
# if textNodes is not provided as an argument then only element nodes
# will be returned
allowedTypes = if textNodes is 'all' then [1,3] else if textNodes then [3] else [1]
# nodes we find
nodes = []
dig = (node) ->
# loop through children
for child in node.childNodes
# push child to collection if has allowed type
nodes.push(child) if child.nodeType in allowedTypes
# dig through child if has children
dig child if child.childNodes.length
# loop and dig through nodes in the current
# jQuery object
dig node for node in this
# wrap with jQuery
return jQuery(nodes)자바 스크립트 버전에서 삭제
var __indexOf=[].indexOf||function(e){for(var t=0,n=this.length;t<n;t++){if(t in this&&this[t]===e)return t}return-1}; /* indexOf polyfill ends here*/ jQuery.fn.descendants=function(e){var t,n,r,i,s,o;t=e==="all"?[1,3]:e?[3]:[1];i=[];n=function(e){var r,s,o,u,a,f;u=e.childNodes;f=[];for(s=0,o=u.length;s<o;s++){r=u[s];if(a=r.nodeType,__indexOf.call(t,a)>=0){i.push(r)}if(r.childNodes.length){f.push(n(r))}else{f.push(void 0)}}return f};for(s=0,o=this.length;s<o;s++){r=this[s];n(r)}return jQuery(i)}축소되지 않은 자바 스크립트 버전 : http://pastebin.com/cX3jMfuD
이것은 크로스 브라우저이며 작은 Array.indexOfpolyfill이 코드에 포함되어 있습니다.
