Question

我有几个类，名称如下：

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

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

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

喜欢的排序：

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

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

Answer 1

jQuery

$.each用于数组的迭代。它带有两个参数[index, element]。
element是数组的元素。不要使用this，因为不推荐使用！

$(classList).each((idx, elem) => {
  $('.'+elem+'-string')
});

母语

要使用本机方法，我们将使用[].forEach或for...of迭代。
注意：for...of方法仅受ES6支持。

// for...of loop
for(i of elem)
  $(`.${elem}-string`)

// forEach loop
elem.forEach(function(elem) {
  $('.'+elem+'-string')
});

Answer 2

您使用.each时遇到一些一般性问题。试试：

$(classList).each(function(idx, cls) {
    let newClass = '.' + cls + '-string';
    $(newClass) ...
});

Answer 3

我想遍历数组，

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>

将字符串传递给jQuery选择器

3 个答案:

jQuery

母语