Question

HTML标记：

<div data-id='23|24|25'></div>
<div data-id='29|30|31'></div>

脚本：

var array = [
  {
    "mid": "24"
  },
  {
    "mid": "26"
  },
  {
    "mid": "28"
  },
  {
    "mid": "29"
  },
  {
    "mid": "30"
  },
  {
    "mid": "31"
  }
];
var item_html ="";

$.each(array,function(i,k) {
  item_html = '<h3>'+k["mid"]+'</h3>';
  $('div[data-id="'+k["mid"]+'"').append(item_html); ???????????
});

如果＆＃34; |＆＃34;的一部分可以找到div元素吗？ data-id中的分隔值与mid？

匹配

我试图获得这样的输出：

<div data-id='23|24|25'>
  <h3>24</h3>
</div>
<div data-id='29|30|31'>
  <h3>29</h3>
  <h3>30</h3>
  <h3>31</h3>

Answer 1

您应该使用*=选择器（包含）：

$('div[data-id*="'+k["mid"]+'"').append(item_html);

Answer 2

您正在寻找的结果是棘手的。我已经更新了你的代码。希望这会对你有所帮助。

var array = [
 { "mid": "24"},
 {"mid": "26"},
 {"mid": "28"},
 {"mid": "29"},
 {"mid": "30"},
 {"mid": "31"}
];
$('[data-id]').each(function(){   
  var $this = $(this), dataArr = $this.data('id').split('|'), i = 0;
  for(;i< dataArr.length; i++) {
    if(numInObjArr(array,dataArr[i])) {
       $this.append('<h3>'+ dataArr[i] +'</h3>');
    }
  }    
});

//function to check number in array object provided above
function numInObjArr(objArr, num){
  for (var i = 0, len=objArr.length; i< len; i++){
    if(objArr[i]["mid"] == num) {
        return true;
    }
  }
  return false;
}

http://jsfiddle.net/EZ56N/73/查看工作示例

按使用＆＃34; |＆＃34;的数据属性查找元素作为分隔符

2 个答案: