Question

我有一个无序列表，里面有12个列表项

<ul class="rb-grid" id="list">
   <li class="view view-fifth">
       <div class="mask">
          <h2>Article Name</h2>
          <p>Brief</p>
          <a href="#" class="info">Read More</a>
       </div>
   </li>
   ...
   ...
</ul>

现在我想要的是在页面加载时我必须更改这些h2和p标签的内容，现在虽然我可以通过硬编码每个列表项来完成此操作，但是任何人都可以告诉我更好的方法来进行所有更改一次使用javascript或jquery任何东西.... 现在我在道场发现了类似的东西，这将明确我想要的东西 -

var items = registry.byId("list").getChildren();
array.forEach(items, function(item, idx) {
item.onClick = function(evt) {
};
});

我想做一些这样的事情来改变每个列表项中的h2和p标签的内容

Answer 1

试试这个：（ jquery ）

var lis = $('.rb-grid').children('li');
for(var i = 0; i < lis.length : i++){
    $(lis).eq(i).find('p').html("change to something");
    $(lis).eq(i).find('h2').html("change to something");
}

Answer 2

非jquery方式：

var ee = document.getElementById('list').getElementsByTagName('li');

for(i=0; i<ee.length; i++) {
    ee[i].getElementsByTagName('h2')[0].textContent = "hello world";
    ee[i].getElementsByTagName('p')[0].textContent = "article 2";
}

编辑：IE9之前的IE似乎没有textContent，而应该使用innerText。谢谢Mr_Green！

Answer 3

<强> JS

var x =$('.rb-grid').children('li');
x.find('p').html('change to something');
x.find('h2').html('change to something');

Answer 4

这里的比较是Mr_Green答案的一个更惯用的jQuery版本：

$('.rb-grid').children('li').each( function( i, element ) {
    var $element = $(element);
    $element.find('p').html("change to something");
    $element.find('h2').html("change to something");
});

OTOH，你可能根本不需要循环，这取决于你正在做什么。如果您只想将所有相关的嵌套p和h2元素更改为相同的值，那么Tushar Gupta的答案是一种更简单的方法。

用于更改列表项的内部dom元素的Javascript高效方法

4 个答案: