javascript - 如何在 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-* 元素在第二个中这样做，当我只想获取 post-* 和 .woocommerce-loop-product__title< 的内容时，我正在获取 post-* 中的所有内容.

如何使用多个 jQuery 选择器(特别是 Attribute Contains Selector)来实现这一点？如果这不是正确的解决方案，那么我应该如何处理呢？

Answer 1

假设您的意思是您不想在每次有人上传时都添加一行，请使用通配符选择器:

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

它将选择所有元素 .woocommerce-loop-product__title 其父元素的类名以 'post-' 开头。如果 'post-' 不是这些元素中的第一个类名，请改用它:

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