Question

我有一篇博客帖子，我正在尝试添加“下一篇文章”和“上一篇文章”功能。我正在使用JS来做到这一点。

我从HTML页面中提取数据，该页面列出了包含HTML的所有博文：

<div class="post-info" data-blog-post-ID="472140">
 <span class="link">/blog/post4</span> <!-- URL OF BLOG POST -->
 <span class="title">Post  4</span> <!-- TITLE OF BLOG POST -->
</div>

一旦我拉入数据，我想运行一个功能，比较当前帖子的博客ID，然后在数据中找到。一旦我这样做，我想找到包含博客ID的div的前一个和下一个兄弟，并使用.html将其插入到页面中。

我试图让它工作，但事实并非如此。没有错误，所以我认为我的JS错误地选择了元素？

以下是我的尝试：

$(function() {
    var blogID = "{tag_blogpostid}",
        blogList = $(".blog-post-list").find("[data-blog-post-ID='" + blogID + "']");

    if (blogID == blogList){
        var prevLink = $(blogList).prev( ".link" ).text(),
            prevTitle = $(blogList).prev( ".title" ).text(),
            nextLink = $(blogList).next( ".link" ).text(),
            nextTitle = $(blogList).next( ".title" ).text();

        $( ".prev" ).html( '<a href="' + prevLink + '">' +prevTitle+ '</a>' );
        $( ".next" ).html( '<a href="' + nextLink + '">' +nextTitle+ '</a>' );
    }
});

Here is a jsFiddle以及其他HTML和上述代码。

问题是什么？我如何解决问题，以便创建我想要实现的目标。

Answer 1

让我们看一下代码：

var blogID = "{tag_blogpostid}",
    blogList = $(".blog-post-list").find("[data-blog-post-ID='" + blogID + "']");

if (blogID == blogList){

那你在比较什么？

blogID    <-- String
blogList  <-- jQuery object

字符串永远不会等于jQuery对象。

你应该检查长度

if (blogList.length) {
    ...
}

blogList是一个jQuery对象，因此无需将其包装在$()中。 blogList.find(...)可以正常使用。

最后prev是错误的，它正在寻找一个有类链接的兄弟。链接类是该兄弟的孩子。

prevLink = blogList.prev(".post-info").find( ".link" ).text()

当然你需要对其他人这样做。

$(function() {
    var blogID = "472140",
        blogList = $(".blog-post-list").find("[data-blog-post-ID='" + blogID + "']");

    if (blogList.length){
        var prev = blogList.prev(".post-info"),
            next =  blogList.next(".post-info"),
            prevLink = prev.find( ".link" ).text(),
            prevTitle = prev.find( ".title" ).text(),
            nextLink = next.find( ".link" ).text(),
            nextTitle = next.find( ".title" ).text();

        $( ".prev" ).html( '<a href="' + prevLink + '">' +prevTitle+ '</a>' );
        $( ".next" ).html( '<a href="' + nextLink + '">' +nextTitle+ '</a>' );
    }
});

摆弄变化：http://jsfiddle.net/3XjUx/

Answer 2

这是一个有效的DEMO

$(function() {
  var blogID = "472140",
      blogList = $(".blog-post-list").find("[data-blog-post-ID='" + blogID + "']");
  if (blogList.length){ 
    var prevLink = blogList.prev().find(".link" ).text(),
        prevTitle = blogList.prev().find( ".title" ).text(),
        nextLink = blogList.next().find( ".link" ).text(),
        nextTitle = blogList.next().find( ".title" ).text();

    $( ".prev" ).html( '<a href="' + prevLink + '">' +prevTitle+ '</a>' );
    $( ".next" ).html( '<a href="' + nextLink + '">' +nextTitle+ '</a>' );
  }
});

正如epascarello所说，bloglist是一个jQuery对象，所以没有必要继续将它包装在$()中。此外，由于blogList捕获了div，我将上一个和下一个的迭代更改为更简单一点，但您可以随意更改它，只需知道blogList所代表的内容。

编辑再次，epascarello打败了我...但是只需检查blogList上的长度就可以确保找到div了。

查找兄弟分区的数据属性和信息

2 个答案: