ここでjQueryの

Question

で複数のセレクタを使用するためにどのようにクライアントが新しいイメージをアップロードするまで、正常に動作します私が使っていたコードは（あること - それが再び動作するように修正しなければなりません：

$(document).ready(function() { 
 

 
var firstProduct = $('.post-416 .woocommerce-loop-product__title').html(); 
 
jQuery('.post-416 h2.woocommerce-loop-product__title').remove(); 
 
var firstPrice = $('.post-416 .price').html(); 
 
jQuery('.post-416 .price').remove(); 
 
console.log(firstProduct + firstPrice); 
 
var secondProduct = $('.post-186 .woocommerce-loop-product__title').html(); 
 
jQuery('.post-186 h2.woocommerce-loop-product__title').remove(); 
 
var secondPrice = $('.post-186 .price').html(); 
 
$('.post-186 .price').remove(); 
 

 
var thirdProduct = $('.post-413 .woocommerce-loop-product__title').html(); 
 
$('.post-413 h2.woocommerce-loop-product__title').remove(); 
 
var thirdPrice = $('.post-413 .price').html(); 
 
$('.post-413 .price').remove(); 
 

 
var fourthProduct = $('.post-218 .woocommerce-loop-product__title').html(); 
 
$('.post-218 h2.woocommerce-loop-product__title').remove(); 
 
var fourthPrice = $('.post-218 .price').html(); 
 
$('.post-218 .price').remove(); 
 

 
var linebreak = ("<br>") 
 

 
$(".post-416 .et_overlay").append(firstProduct + linebreak + firstPrice); 
 

 
$(".post-186 .et_overlay").append(secondProduct + linebreak + secondPrice); 
 

 
$(".post-413 .et_overlay").append(thirdProduct + linebreak + thirdPrice); 
 

 
$(".post-218 .et_overlay").append(fourthProduct + linebreak + fourthPrice); 
 

 
});

私はこの

jQuery(document).ready(function() { 
 
var postClasses = jQuery("li[class*='post-").toArray(); 
 

 

 
jQuery(postClasses[0]).each(function(index) { 
 
    console.log(index + ": " + jQuery(this).text()); 
 
}); 
 

 

 
jQuery(".et_overlay:first").appendTo(); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

のようなものと交換しようとしてる

問題は最初のセクションにあります。.woocommerce-loop-product__titleを共有するすべてのpost-*要素を取得することができます。これは、2番目の方法でしようとすると、投稿のコンテンツのすべてのビットを取得しています* post-*と.woocommerce-loop-product__titleのコンテンツを取得したいときだけです。

これを達成するには、複数のjQueryセレクタ（、特に、属性を含むセレクタ）を使用するにはどうすればよいですか？これが適切な解決策でない場合、私はこれにどのようにアプローチすべきですか？

jQuery('[class^="post-"] .woocommerce-loop-product__title').html() 

それはクラスを持つ親を持つすべての要素.woocommerce-loop-product__titleを選択します：あなたは、ワイルドカードセレクターを使用し、各時間誰かのアップロードの行を追加する必要がありますする必要はありません意味していると仮定すると、

Answer 1

'post-'で始まる名前です。 'post-'は、これらの要素の最初のクラス名でない場合は、代わりにこれを使用する：

jQuery('[class*="post-"] .woocommerce-loop-product__title').html() 

Answer 2

使用この

$(document).ready(function() { 
    /*if the post-* elements have the product class use it*/ 
    var posts = $('.product'), // or $('[class*="post-"]) 
    linebreak = '<br>'; 


    posts.each(function() { 
    var self = $(this), 
     title = self.find('.woocommerce-loop-product__title'), 
     price = self.find('.price'), 
     overlay = self.find('.et_overlay'); 

    overlay.append(title.html() + linebreak + price.html()); 

    title.remove(); 
    price.remove(); 
    }); 

});