我正在努力编辑JS代码/API (Google Feeds)以使其在响应式设计中工作。
现在API的结果如下:<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
...
我希望它是这样的:
<div class="gfg-group">
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
</div>
<div class="gfg-group">
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
</div>
我尝试了这个(但没有得到任何结果):
$(document).ready(function(){ $("#contentfeed").append("<div class='gfg-grouped'></div>");
$(".gfg-grouped").text($(".gfg-subtitle").text() + " " +$(".gfg-list").text()); });
也试过这个(似乎也不起作用):
var groupDiv = document.createElement('div');
groupDiv.className = 'gfg-group';
groupDiv.appendChild(newTitle);
groupDiv.appendChild(newList);
见http://jsfiddle.net/pnwm67q8/2/:
感谢之前的回复,我继续自己解决了这个问题(花了我很长时间,但这就是我们学习的方式,对吗?:)把解决方案留在这里,如果能帮助到别人。
我添加了以下行:
var newGroup = this.createDiv_('gfg-grouped');
和
if (!this.options.horizontal && this.options.stacked) {
var newGroup = this.createDiv_('gfg-grouped');
var newTitle = this.createDiv_('gfg-subtitle');
nodes.root.appendChild(newGroup);
newGroup.appendChild(newTitle);
this.setTitle_(this.results[0].feed, newTitle);
和
newGroup.appendChild(nodes.list);
见:http://jsfiddle.net/m5krqvbz/3/
这里有很多逻辑我对API不太熟悉但你可以这样对条目进行分组:
// group the Title and List
var groupDiv = document.createElement('div');
groupDiv.className = 'gfg-grouped';
groupDiv.appendChild(newTitle);
groupDiv.appendChild(newList);
您将得到如下内容:
$intendedContainer = $("");
$(".gfg-subtitle").each(function(){
var $list = $(this).next().detach();
var $subitle = $(this).detach();
var $groupItem = $("<div class='gfg-group'></div>");
$groupItem.append($list).append($subtitle);
$groupItem.insertBefore($subTitle);
$intendedContainer.append($groupItem);
});
我没有通读你的整个代码,因为它非常大,但这是你需要实现的逻辑。