我正在努力寻找单个数据值。下面是我的示例代码:
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
,它将得到我想要的结果。
在这种情况下我该怎么办?
答案 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" />