javascript - 将字符串传递给jQuery选择器

我有几个名称如下的类：


.x-字符串
.y-字符串
.z字符串


动态部分和恒定部分。我做了一个包含动态部分（x，y，z）的数组。

我想遍历数组，使用每个名称，将“ -string”连接到其末尾，并将其作为要在jQuery中选择的类传递。

有点像：

$(classList).each(function () {
    let newClass = '.' + this + '-string'
    $('.this-string')...
}

这可能吗，我将如何处理？干杯。

最佳答案

我想遍历数组，


jQuery处理数组的方式与jQuery对象包装程序上的处理方式不同。因此，要遍历数组，可以使用jQuery.each() or $.each()。

var myArray = ['x', 'y', 'z'];
$.each(myArray, function(idxArray, valArray) {
  // code
});

  将“ -string”连接到它的末尾，并将其作为要在jQuery中选择的类传递


现在我们可以将jQuery选择器与.each()一起使用以查找匹配的元素

var myArray = ['x', 'y', 'z'];
$.each(myArray, function(idxArray, valArray) {

  var selector = "." + valArray = "-string";
  $(selector).each(function(idxElement, valElement) {
    var $this = $(valElement);
    // or
    var $this = $(this);

    $this.fadeOut();

  });

});

重要的是要注意，第二个.each()仅在找到项目后要运行特定逻辑的情况下才应使用。如果每个元素的代码都相同，则不需要每个元素：

var selector = "." + valArray = "-string";
// fadeOut all matching elements
$(selector).fadeOut();

同样重要的是要注意，如果逻辑与您的示例一样简单，则根本不需要循环。您可以创建一个包含所有选择器的逗号分隔字符串。

var myArray = ["a","b","c","d"];

var selector = myArray
  .map(s => "." + s + "-string")
  .join();

  $(selector).css("color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Black</div>
<div class="a-string">Red</div>
<div>Black</div>
<div class="b-string">Red</div>
<div>Black</div>
<div class="c-string">Red</div>
<div>Black</div>
<div class="d-string">Red</div>