Question

<div id="abc">
    <div id="a_b"> abcd </div>
    <div id="c_d"> xyz </div>
</div>

问题是div是动态生成的，并且每次呈现页面时它们的ID都会不断变化。在窗口加载时，a_b和c_d的内容必须传递函数func()，输出应放在同一个div中。如何抓住div abc的每个孩子并修改其内容？

Answer 1

鉴于#abc div始终可用，您可以选择该元素，然后选择任何直接子div元素，并使用带有处理函数的text()循环它们，如下所示：

$('#abc > div').text(function(i, v) {
    return v + ' foobar';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">
  <div id="a_b">abcd</div>
  <div id="c_d">xyz</div>
</div>

或者，您可以创建子div的内容数组并将其传递给func()：

var textContents = $('#abc > div').map(function() {
    return $(this).text();
}).get();

func(textContents);

function func(arrText) {
    console.log(arrText); // = [ 'abcd', 'xyz' ]
}

Answer 2

尝试使用.text()和.each()来实现您的目标。

$(window).load(function(){
  $("#abc > div").each(function() {
     $(this).text(someFunction($(this).text()));
  });
});

或者更好的代码将使用.text()的接收函数，

$(window).load(function(){
  $("#abc > div").text(function(_,v) {
    return someFunc(v);
  });
});

使用JavaScript / JQuery修改另一个div中的子div的内容

2 个答案: