document.getElementsByClassName然后在两个div之间发布

时间:2014-01-26 07:51:15

标签: javascript php jquery html ajax

有没有办法获得一个“选定”类的唯一帖子,然后在其他div之间/之间插入一个div?我基本上是将图像发布到我的网站时间线上,现在我正在尝试对同一日期发布的一大堆图像进行分组,但网站的结构方式是从数据库中提取信息然后将其输出到XML中。我通过AJAX / JQuery提取XML信息,然后根据类型,它以不同的方式发布(不同的布局),如1类型的类型/内容帖子,一个用于图像帖子,等等。正如我所说,我需要在同一天对图像进行分组。

到目前为止,这是我的代码:

function post_cat_image(postid, postaccount_name, postauthor, posttype, postdata, postdate, profileimg, postdatefordisplay, postapplauds){
post_image_dates[counter] = postdate;

if($.inArray(postdate, post_image_dates)){
    var posts = $(".year");
    posts.removeClass("selected");
    var slt;
    var matchedPost = posts.filter("[data-date='" + postdate + "']");
    if(matchedPost.length > 0){
        matchedPost.addClass("selected");
        slt = document.getElementByClassName('selected');
var more_post_content = document.createElement('div');
    more_post_content.id = 'more_post_content';

    var ul = document.createElement('ul');
    var li = document.createElement('li');
    li.innerHTML = '<a href="#"><img src="' + postdata + '"/></a>';

    ul.appendChild(li);
    more_post_content.appendChild(ul);
var slt = document.getElementById("selected");

        if(slt && slt.length){
          slt[0].appendChild(more_post_content);
        }
    }




    slt.appendChild(more_post_content);

    return 0;
} else {

var timeline_item = document.createElement('div');
timeline_item.className = "timeline-item";

timeline_item.setAttribute('data-date', postdate);

var year = document.createElement('div');
year.className = "year";
year.innerHTML = '<a href="#">' + postdatefordisplay + '</a>';

year.setAttribute('data-date', postdate);


var marker = document.createElement('span');
marker.className = "marker";

var type = document.createElement('span');
type.className = "post_comment";

marker.appendChild(type);
year.appendChild(marker);
timeline_item.appendChild(year);

var info = document.createElement('div');
info.className = 'info';

var main = document.createElement('div');
main.className = 'main';

var image = document.createElement('div');
image.id = 'image';
if(profileimg == ''){
    profileimg = 'images/profiles/profile.jpg'
}
image.innerHTML = '<a href="timeline.php?user=' + postaccount_name + '"><img style="width:50px;" src="'+ profileimg +'" /></a>';

var cont = document.createElement('div');
cont.id = "cont";
cont.innerHTML = '<h3><a href="timeline.php?user=' + postaccount_name + '">'+ postauthor +'</a></h3>';

var post_content = document.createElement('div');
post_content.id = 'post_content';

var image_post_content = document.createElement('div');
image_post_content.id = 'image_post_content';
image_post_content.innerHTML = '<a href="#"><img id="main_image" src="' + postdata + '"</a>';

var more_post_content = document.createElement('div');
more_post_content.id = 'more_post_content';


var clear = document.createElement('div');
clear.className = 'clearfix';

var clear2 = document.createElement('div');
clear2.className = 'clearfix';

var clear3 = document.createElement('div');
clear3.className = 'clearfix';

var comm_app = document.createElement('div');
comm_app.id = 'comm_app';
comm_app.innerHTML = '<ul><li><a href="#" class="applause" onclick="applause(' + postaccount_name + ')">Applaud(' + postapplauds + ')</a></li></ul>';


main.appendChild(image);
main.appendChild(cont);
main.appendChild(clear);
post_content.appendChild(image_post_content);
main.appendChild(post_content);
main.appendChild(clear2);
main.appendChild(clear3);
main.appendChild(comm_app);

info.appendChild(main);

timeline_item.appendChild(info);
document.getElementById('timeline').appendChild(timeline_item);

counter++;
}
}

但是我在尝试上课时遇到错误,我认为我没有把图像分组在一起吗?

这是错误:

TypeError: 'undefined' is not an object (evaluating 'slt.appendChild')

我是JavaScript,JQuery和AJAX的新手,但我在PHP方面有更多经验 - 仍然不多,只有几个月对任何错误感到抱歉

1 个答案:

答案 0 :(得分:1)

document.getElementByClassName会返回NodeList,而非节点。

您必须选择一个项目,例如:

if(slt && slt.length){
  slt[0].appendChild(more_post_content);
}