Question

以下是示例代码

HTML

<div class="class-name-1"></div>
<div class="class-name-1"></div>

<div class="class-name-2"></div>
<div class="class-name-2"></div>

...

<div class="class-name-30"></div>
<div class="class-name-30"></div>

Jquery的

$('class^=class-name-').each(function() {
  console.log($(this));

  fn_myFunction();
});

此脚本将运行60次fn_myFunction()，我希望每个fn_myFunction()只运行一次class^=class-name-，这意味着上面的脚本运行fn_myFunction()总共30次。

返回第一个或最后一个元素也没问题。

如果可能的话，我想将jquery选择器保持为$('class^=class-name-')。

我如何用jquery做到这一点？

感谢。

Answer 1

您可以构建一个唯一类的数组，然后使用.filter() method相应地过滤元素。

在下面的示例中，$uniqueElements是一个表示已过滤元素的jQuery对象。

＆＃13;

var uniqueClasses = [];
var $uniqueElements = $('[class*=class-name-]').filter(function () {
  var classes = $(this).attr('class').match(/class-name-\d+/)[0];
  return uniqueClasses.indexOf(classes) === -1 ? uniqueClasses.push(classes) : 0;
});

$uniqueElements.css('background-color', '#f00');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-class class-name-1 other-class">class-name-1</div>
<div class="first-class class-name-1 other-class">class-name-1</div>

<div class="class-name-2">class-name-2</div>
<div class="class-name-2">class-name-2</div>

＆＃13;

然后你可以迭代$uniqueElements中的每个元素并调用你的函数：

＆＃13;

var uniqueClasses = [];
var $uniqueElements = $('[class*=class-name-]').filter(function () {
  var classes = $(this).attr('class').match(/class-name-\d+/)[0];
  return uniqueClasses.indexOf(classes) === -1 ? uniqueClasses.push(classes) : 0;
});

$uniqueElements.each(fn_myFunction);

function fn_myFunction () {
  $(this).css('background-color', '#f00');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-class class-name-1 other-class">class-name-1</div>
<div class="first-class class-name-1 other-class">class-name-1</div>

<div class="class-name-2">class-name-2</div>
<div class="class-name-2">class-name-2</div>

＆＃13;

Answer 2

$('class^=class-name-')似乎不是一个有效的jQuery选择器？

尝试在选择器周围添加括号，使用next sibling选择器匹配元素具有相同className的sibgling的元素，该元素最多应返回两个元素;一个"class-name-1"，一个"class-name-2"，问题

给出html

$("[class^=class-name-]").each(function() {
  if ($("~ ." + this.className, this).length) {
    // some function here
    console.log(this)
  } 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="class-name-1"></div>
<div class="class-name-1"></div>

<div class="class-name-2"></div>
<div class="class-name-2"></div>

Answer 3

尝试在div中添加一个类掩码。

样品：

＆＃13;

<div class="class-name-1 mask"></div>
<div class="class-name-1 mask"></div>

<div class="class-name-2 mask"></div>
<div class="class-name-2 mask"></div>

...

<div class="class-name-30 mask"></div>
<div class="class-name-30 mask"></div>

＆＃13;

现在，只需为新类创建一个JQuery：

＆＃13;

$('.mask').each(function() {
  console.log($(this));

  fn_myFunction();
});

＆＃13;

Jquery用每个函数过滤掉双类名

3 个答案: