从多个值中查找单个数据属性值

时间:2018-12-17 11:24:17

标签: jquery

我正在努力寻找单个数据值。下面是我的示例代码:

var num = 0;

var element = <div> {num} </div>
ReactDOM.render(
    element,
    document.getElementById("root")
)
num++;

ReactDOM.render(
    element,
    document.getElementById("root")
)

num++;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-aclass="Question1" />
<input type="text" data-aclass="inQuestion1 Attention" />
<input type="text" data-aclass="inQuestion2 Physical" />

在这里,$(':text[data-aclass^=Que]').on("change", function() { var currentQuestion = "", inQuestion = ""; currentQuestion = $(this).data("aclass"); var inQ = "in" + currentQuestion; inQuestion = $("[data-aclass='" + inQ + "']"); }); 的长度为$("[data-aclass='" + inQ + "']"),如果我从0属性中删除了Attention,它将得到我想要的结果。 在这种情况下我该怎么办?

1 个答案:

答案 0 :(得分:1)

问题是因为您的选择器是[data-aclass='inQuestion1'],它需要对该值进行 exact 匹配,但是您要查找的元素在该属性中具有其他值,例如以及inQuestionN。因此,您还需要在此处使用“属性始于”选择器:

$(':text[data-aclass^=Que]').on('change', function() {
  var currentQuestion = '', inQuestion = '';
    
  currentQuestion = $(this).data('aclass');
  var inQ = 'in' + currentQuestion;
  inQuestion = $('[data-aclass^="' + inQ + '"]'); // note ^ here
  
  console.log(inQuestion.length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-aclass="Question1" />
<input type="text" data-aclass="inQuestion1 Attention" />
<input type="text" data-aclass="inQuestion2 Physical" />

编辑:

鉴于您在以下有关与inQuestion10等贪婪匹配的评论,那么一种解决方法是改用filter()。然后,您可以将data属性拆分为一个数组,并确定其中是否包含确切的值:

$(':text[data-aclass^=Que]').on('change', function() {
  var currentQuestion = $(this).data('aclass');
  var inQ = 'in' + currentQuestion;
  
  var $inQuestion = $('[data-aclass]').filter(function() {
    var values = $(this).data('aclass').split(' ');
    return values.indexOf(inQ) != -1;
  });
  
  console.log($inQuestion.data('aclass'));
  console.log($inQuestion.length);  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-aclass="Question1" />
<input type="text" data-aclass="inQuestion1 Attention" />
<input type="text" data-aclass="inQuestion2 Physical" />
<input type="text" data-aclass="inQuestion10 Physical" />
<input type="text" data-aclass="inQuestion111 Physical" />