jQuery选择器，DIV中的所有跨度

Question

 $("#" + mainContent).children("span").replaceWith(function(){ return $(this).text(); });

使用上面的代码行我似乎无法用文本值替换所有跨度。

html看起来像

<div id="bla" contenteditable="true">
<span> bla finds this one</span>
    <div>
        <span> doesnt find me </span>
    </div>
</div>

如何选择div“bla”中的所有跨度并全部替换它们？

替换只是查找不起作用。

Answer 1

使用.find ^[docs]代替.children。它寻找所有后代，而不仅仅是孩子。

查看所有不同遍历方法的jQuery API：http://api.jquery.com/category/traversing/tree-traversal/。

Answer 2

您可以尝试：

$('span',"#" + mainContent).each(function(){this.html('Something Different')})

取决于您尝试更换它们的内容。

Answer 3

jQuery的children()函数仅匹配直接子项。对于DOM结构，只有一个<span>元素是您的选择器匹配的<div>的直接子元素。如果要查找选择器匹配的元素层次结构下的所有元素，则需要使用find()在层次结构中执行搜索，或者必须修改选择器：< / p>

$('div span')匹配div下面的所有跨距以及DOM层次结构中所有的跨距。

$('div > span'）匹配DOM中div的所有直接跨度子节点。

Answer 4

使用.find（）代替.children（）：

$("#" + mainContent).find("span").replaceWith(function(){ return $(this).text(); });