JQuery循环遍历类,然后比较属性并确定是否找到任何匹配项

时间:2014-12-09 16:04:59

标签: javascript jquery

基本上我正在尝试检查是否已创建某些内容以及是否已分配属性的值。

因此,我基本上在寻找所有$('.item')类,对于此示例,这些项具有类似data-value="1"的属性,并且html中的每个项目都具有此属性的唯一值,例如:

<div class="item" data-value="1">Item 1</div>
<div class="item" data-value="2">Item 2</div>
<div class="item" data-value="3">Item 3</div>

要触发我们的JQuery,我们将有一个设计用于对应项目的按钮:

<button class="button" data-value="1">Button for Item 1</button>
<button class="button" data-value="2">Button for Item 2</button>
<button class="button" data-value="3">Button for Item 3</button>
<button class="button" data-value="4">Button for Item 4</button>

所以现在在jQuery中我想查看它们并运行一个函数来创建一个新函数,如果它不存在。

这就是我解释这个的方法,但它不起作用:(假设这是在点击触发的函数内。

var itemClicked = $(this);
var findItem = $('.item').each(function() {
  if ($(this).attr('data-value') == itemClicked.attr('data-value')) {
    return true;
  }
});
if (!findItem) {
  // create new item
}

因此理论上,按钮1,按钮2和按钮3将通过测试,并且不会创建新项目。但是按钮4将无法通过检查并基本上创建一个新项目。

但我无法检查工作怎么办呢?

3 个答案:

答案 0 :(得分:3)

您可以这样做:

$("input[type=button]").click(function () {
    if($("div[data-value='"+ $(this).data("value") +"']").length == 0 ){
        // create new item
    }
});

<强>更新

http://jsfiddle.net/o6q8ew4z/

答案 1 :(得分:0)

请复制一下:

var itemClicked = $(this);
var findItem = ($('.item[data-value="' + itemClicked.attr('data-value') + '"]').length > 0 );
if (!findItem) {
  // create new item
}

答案 2 :(得分:-1)

这样做:

var itemClicked = $(this);

var createIem = function(){
    //enter code here
};

var findItem = $('.item').each(function() {
  if ($(this).attr('data-value') == itemClicked.attr('data-value')) {
    createIem();
  }
});