2

我有一个无序列表，里面有 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 任何东西......现在我在 dojo 中找到了类似的东西，这将清楚我想要什么 -

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

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

4

4 回答 4

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。谢谢格林先生！

于 2013-08-31T05:20:55.887 回答
2

js

var x =$('.rb-grid').children('li');
x.find('p').html('change to something');
x.find('h2').html('change to something');
于 2013-08-31T05:21:56.643 回答
2

试试这个：（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");
}
于 2013-08-31T05:16:56.563 回答
1

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

$('.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 的答案是一种更简单的方法。

于 2013-08-31T06:38:42.943 回答