如何使用多個選擇使用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>

問題是在第一部分中，我能夠抓住所有post-*元素，這些元素也共享.woocommerce-loop-product__title類，當我在第二個元素中嘗試這樣做時，我抓住了內容的每一位，當我只想抓取post-*和.woocommerce-loop-product__title的內容時。

如何使用多個jQuery選擇器（，特別是屬性包含選擇器）來完成此操作？如果這不是正確的解決方案，那麼我應該如何處理？

Answer 1

假設你的意思你不希望有添加一行每次有人上傳，使用通配符選擇：

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

將選擇具有父帶班的所有元素.woocommerce-loop-product__title名稱以'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(); 
    }); 

});