Выберите атрибут с уникальными номерами в конце

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>

Я перебирал это с помощью ".each" на li, но в итоге я добавил его в списки, которые включены в любой контент поста. Поэтому я хочу добавить это только один раз в фактический родительский элемент каждого отдельного сообщения в блоге.

То, что я пытаюсь сделать, это добавить его только к <li> с классом «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"]')

Это даст вам только прямые дочерние элементы li с классом post *, которые являются прямыми дочерними элементами UL, который является прямым потомком div с классомblogList.