Question

这是我的情况，

我有一个包含多个帖子的循环，我希望通过jquery添加以前在js创建的新div中调用的链接。

它看起来像这样：

 if ($(this).hasClass('64')){

        $(this).append('<a class="video-post-archive" href="">Watch the video</a>');

基本上在上面，我添加了一个新的div，它将包含来自帖子的href值调用。

为此我宣布一个变量，如：

        var newlink = $(".widgetizedArea ul li a").attr("href")

然后调用append div中的值，如：

if ($(this).hasClass('64')){

        $(this).append('<a class="video-post-archive" href="">Watch the video</a>');

        $(this).find('a.video-post-archive').attr('href', newlink);

    }

我遇到的问题是它为循环中的所有帖子重复相同的链接。 ..

示例：项目1链接鳍，但项目2链接到项目1内容，项目3链接到项目1内容而不是他们自己的内容。。

有什么想法可以帮助我吗？

这将是辉煌的！

感谢所有人：）

---编辑---

在Html中，它看起来像下面（因为我们可以看到它总是附加相同的href ...）：

<div class="widgetizedArea"><h3>HOW TO...</h3><div class="row"><ul class="large-offset-1 inner-content grid-x grid-margin-x grid-padding-x large-centered medium-centered small-centered">

    <li class="small-3 small-centered medium-3 medium-centered large-3 large-centered colum columns cat-post-item 64 Image" data-permanlink="http://thelocalsite.local/video-post-04/">



                        <a href="http://thelocalsite.local/video-post-04/" title="Video post 04">
            <img width="422" height="281" src="http://thelocalsite.local/wp-content/uploads/2018/03/blog-004.png" class="attachment-cat_post_thumb_sizecategoryposts-10 size-cat_post_thumb_sizecategoryposts-10 wp-post-image" alt="" srcset="http://thelocalsite.local/wp-content/uploads/2018/03/blog-004.png 422w, http://thelocalsite.local/wp-content/uploads/2018/03/blog-004-300x200.png 300w" sizes="(max-width: 422px) 100vw, 422px">                </a>

            <a class="post-title" href="http://thelocalsite.local/video-post-04/" rel="bookmark" title="Permanent link to Video post 04">Video post 04</a>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id nisl ut sapien tristique elementum ac eget purus. Nulla porta cursus purus, vitae luctus massa molestie eu. Donec sit amet nibh malesuada, sodales nunc vitae, aliquam lorem. Duis pulvinar leo nisi, nec sodales ex scelerisque ut.</p>


    <a class="video-post-archive" href="http://thelocalsite.local/video-post-04/"><img src="../wp-content/themes/JointsWP-CSS-master-child/assets/img/right-arrow.svg">Watch the video</a></li>


    <li class="small-3 small-centered medium-3 medium-centered large-3 large-centered colum columns cat-post-item 64 Standard" data-permanlink="http://thelocalsite.local/video-post-03/">



                        <a href="http://thelocalsite.local/video-post-03/" title="Video post 03">
            <img width="424" height="283" src="http://thelocalsite.local/wp-content/uploads/2018/03/blog-003.png" class="attachment-cat_post_thumb_sizecategoryposts-10 size-cat_post_thumb_sizecategoryposts-10 wp-post-image" alt="" srcset="http://thelocalsite.local/wp-content/uploads/2018/03/blog-003.png 424w, http://thelocalsite.local/wp-content/uploads/2018/03/blog-003-300x200.png 300w" sizes="(max-width: 424px) 100vw, 424px">                </a>

            <a class="post-title" href="http://thelocalsite.local/video-post-03/" rel="bookmark" title="Permanent link to Video post 03">Video post 03</a>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id nisl ut sapien tristique elementum ac eget purus. Nulla porta cursus purus, vitae luctus massa molestie eu. Donec sit amet nibh malesuada, sodales nunc vitae, aliquam lorem. Duis pulvinar leo nisi, nec sodales ex scelerisque ut.</p>


    <a class="video-post-archive" href="http://thelocalsite.local/video-post-04/"><img src="../wp-content/themes/JointsWP-CSS-master-child/assets/img/right-arrow.svg">Watch the video</a></li>


    <li class="small-3 small-centered medium-3 medium-centered large-3 large-centered colum columns cat-post-item 64 Video" data-permanlink="http://thelocalsite.local/video-post-02/">



                        <a href="http://thelocalsite.local/video-post-02/" title="Video post 02">
            <img width="422" height="281" src="http://thelocalsite.local/wp-content/uploads/2018/03/blog-002-1.png" class="attachment-cat_post_thumb_sizecategoryposts-10 size-cat_post_thumb_sizecategoryposts-10 wp-post-image" alt="" srcset="http://thelocalsite.local/wp-content/uploads/2018/03/blog-002-1.png 422w, http://thelocalsite.local/wp-content/uploads/2018/03/blog-002-1-300x200.png 300w" sizes="(max-width: 422px) 100vw, 422px">                </a>

            <a class="post-title" href="http://thelocalsite.local/video-post-02/" rel="bookmark" title="Permanent link to Video post 02">Video post 02</a>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id nisl ut sapien tristique elementum ac eget purus. Nulla porta cursus purus, vitae luctus massa molestie eu. Donec sit amet nibh malesuada, sodales nunc vitae, aliquam lorem. Duis pulvinar leo nisi, nec sodales ex scelerisque ut.</p>


    <a class="video-post-archive" href="http://thelocalsite.local/video-post-04/"><img src="../wp-content/themes/JointsWP-CSS-master-child/assets/img/right-arrow.svg">Watch the video</a></li>


    <li class="small-3 small-centered medium-3 medium-centered large-3 large-centered colum columns cat-post-item 64 Video" data-permanlink="http://thelocalsite.local/video-post-01/">



                        <a href="http://thelocalsite.local/video-post-01/" title="Video post 01">
            <img width="422" height="281" src="http://thelocalsite.local/wp-content/uploads/2018/03/blog-001-1.png" class="attachment-cat_post_thumb_sizecategoryposts-10 size-cat_post_thumb_sizecategoryposts-10 wp-post-image" alt="" srcset="http://thelocalsite.local/wp-content/uploads/2018/03/blog-001-1.png 422w, http://thelocalsite.local/wp-content/uploads/2018/03/blog-001-1-300x200.png 300w" sizes="(max-width: 422px) 100vw, 422px">                </a>

            <a class="post-title" href="http://thelocalsite.local/video-post-01/" rel="bookmark" title="Permanent link to Video post 01">Video post 01</a>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id nisl ut sapien tristique elementum ac eget purus. Nulla porta cursus purus, vitae luctus massa molestie eu. Donec sit amet nibh malesuada, sodales nunc vitae, aliquam lorem. Duis pulvinar leo nisi, nec sodales ex scelerisque ut.</p>


    <a class="video-post-archive" href="http://thelocalsite.local/video-post-04/"><img src="../wp-content/themes/JointsWP-CSS-master-child/assets/img/right-arrow.svg">Watch the video</a></li>
</ul>

Answer 1

问题是你总是用

捕获第一个链接

$(".widgetizedArea ul li a").attr('href')

你应该改为

$(".widgetizedArea li.64").each(function(){
   var $ele = $(this);
   var link = $ele.find('a').attr("href");
   $ele.append('<a class="video-post-archive" href="' + link + '">Watch the video</a>')
});

这将解决您的问题，如果您需要任何进一步的帮助，请告诉我。享受：）

使用Jquery

1 个答案: