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

Question

我有几个类，其名称如下:

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

动态部分和恒定部分。我创建了一个包含动态部分(x、y、z)的数组。

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

有点像:

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

这可能吗？我该怎么做？干杯。

Answer 1

I want to loop through the array,

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

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

concatenate "-string" to the end of it, and pass it as a class to be selected in 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>