末尾に一意の番号を持つ属性を選択する

Question

カスタムCMSのブログ投稿のリストを並べ替える状況があります。各ブログ投稿は<li>にラップされ、そのページに複数の投稿があります。私は、各ブログ記事に設定された共有ボタンに入れるコードを持っています。残念ながら、ブログ投稿のすべてのクラス名は「投稿」から始まります。例えば;

<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>に「投稿」のクラスとそれに続く番号だけを追加することです。私はそれが開始名として "投稿"のクラスを持つ他の項目にも追加されるので、単に投稿を探すことはできません。

「投稿」のクラスと番号の要素のみを選択するにはどうすればよいですか？ですから、上記の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

より具体的なクラスセレクタを使用するだけで済みます。このルールは、あなたが必要なものを取得する必要があります。blogListのクラスを持つdiv要素の直接の子であるULの直接の子であるポスト*のクラスであなただけの直接の子李さんを得るでしょう

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

。