Question

我遇到的情况是我在自定义CMS中排序博客帖子列表。每篇博文都包含在<li>中，页面上有多个帖子。我有一些代码，可以在每篇博客文章中分享这个按钮。不幸的是，博客文章的所有类名都以“post”开头。例如;

<div class="blogList">
     <ul>
          <li class="post1">
               <h2 class="postTitle">A Sample Title</h2>
               <div class="postDescription">Some sample content</div>
          </li>

          <li class="post2">
               <h2 class="postTitle">A Sample Title</h2>
               <div class="postDescription">Some sample content</div>
          </li>
     </ul>
</div>

我在li上使用“.each”对其进行了整理，但最终将其添加到任何帖子内容中包含的列表中。所以我想只将这一次添加到每个博客帖子的实际父li上。

我要做的只是将<li>添加到“post”类，然后添加一个数字。我不能只是寻找帖子，因为它也会将它添加到任何其他项目，其中“post”类是它的起始名称。

如何只选择只有“post”类和数字的元素？所以我想在上面的li.post1，li.post2示例中只找到元素。将跳过所有其他元素。

我在jquery做这个，我觉得我很接近，但似乎无法克服这个驼峰。

以下是我正在使用的代码示例。

<script type="text/javascript">
    $(document).ready(function(){

        //Run through the page and find each individual blog post
        $('.blogList li [class^="post"]').each(function () {

            //Grab post title & encode any quotes so they don't mess up generated HTML
            var postTitle = $.trim($(this).children(".postTitle").text().replace('"g, "'));

            //Grab URL from the anchor element inside the h2 element (will not grab correct link in admin mode)
            var postLink =  location.protocol + '//' + location.host + $(this).children("h2").find("a[href]").attr('href');

            //Add "share this" HTML elements to the bottom of the post
            $(this).append(
                 '<div class="st">' + 
                    '<span  class="st_twitter" displayText="Tweet" st_url="' + postLink + '" st_title="' + postTitle + '"></span>' +
                    '<span  class="st_facebook" displayText="Facebook" st_url="' + postLink + '" st_title="' + postTitle + '"></span>' +
                    '<span  class="st_linkedin" displayText="LinkedIn" st_url="' + postLink + '" st_title="' + postTitle + '"></span>' +
                    '<span  class="st_email" displayText="Email" st_url="' + postLink + '" st_title="' + postTitle + '"></span>' +
                    '<span  class="st_blogger" displayText="Blogger" st_url="' + postLink + '" st_title="' + postTitle + '"></span>' +
                    '<span  class="st_sharethis" displayText="ShareThis" st_url="' + postLink + '" st_title="' + postTitle + '"></span>' +
                '</div>'
            );  
        });
    }); 
</script>

Answer 1

您只需要使用更具体的类选择器。这条规则应该得到你所需要的：

$('div.blogList>ul>li[class^="post"]')

这将使你只有一个帖子*的直接孩子，这是一个UL的直接孩子，是一个具有blogList类的div的直接孩子。

选择末尾带有唯一数字的属性

1 个答案: