Question

如何将文本内容和元素内容与jQuery结合使用？

＆＃13;

function getText(key, node) {
    if (node.tagName == 'INPUT') {
        return node.value;
    } else {
        return node.textContent;
    }
}

console.log($("div").find('*').map(getText).get().join(' ').trim().replace(/\s+/g, ' '));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <span>A</span>
 <div>
   B
   <input value='4'>
   <span>C</span>
 </div>
</div>

＆＃13;

应该呈现给字符串＆＃34; A B 4 C＆＃34;。

使用.text()获取textContent或使用.map(function(){return $(this).val();}).get().join(' ')呈现输入元素的值是没有问题的，但是以正确的顺序组合两者是很困难的。

编辑：实现应该适用于嵌套元素的每个深度。它用于获取网页单元测试部分的可比较输出，其中一些可见文本（如标签）呈现为跨度，其他部分（如可编辑值）位于输入元素中。

Answer 1

根据您要对其执行的操作，您可以遍历顶级div中的所有元素，忽略子元素的文本，并将其附加到您希望获取文本或值的位置。像这样的东西

＆＃13;

$(".top *").each(function(){

    $(".holder").append($(this).clone().children().remove().end().text() || $(this).val());
	
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
 <span>A</span>
 <div>
   B
   <input value='4'>
   <span>C</span>
 </div>
</div>

<div class="holder">

</div>

＆＃13;

注意：我在顶级div中添加了一个top类，以便能够选择它

Answer 2

如果OR使用了val()，则使用text()来合并值只是一种方法，否则请使用$(function() { var a = []; a = $.map($(".read *"), function(elem) { return $(elem).val() || $(elem)[0].childNodes[0].nodeValue.trim(); }); console.log(a.join(" ")); });。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='read'>
  <span>A</span>
  <div>
    B
    <input value='4'>
    <span>C</span>
  </div>
</div>

categories

Answer 3

通过其他人的想法，我创造了这个答案。也许它可以通过某种方式进行优化，但至少它可以像预期的那样工作。

＆＃13;

function getText(key, node) {
    if (node.tagName == 'INPUT') {
        return node.value;
    } else {
        let result = "";
        for(var child=node.firstChild; child!==null; child=child.nextSibling) {
            if (child.nodeType === 3) {
                result = result + " "+ child.nodeValue;
            }
        }
        return result;
    }
}

console.log($("div").find('*').map(getText).get().join(' ').trim().replace(/\s+/g, ' '));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <span>A</span>
 <div>
   B
   <input value='4'>
   <span>C</span>
 </div>
</div>

＆＃13;

编辑：事实上，如果C不在一个范围内，它也无法正常工作。

使用jQuery将TextContent和元素中的信息组合在一起

3 个答案: