我有以下代码:
HTML
<div id="Test" class="test">test</div>
<div id="Test1" class="test">test</div>
<div data-id="Test2" class="test">test</div>
<br />
<div id="result1"></div>
<div id="result2"></div>
的jQuery
var result1 = 'Result1:',
result2 = 'Result2:';
$('.test').each(function () {
var test = $(this),
testId1 = (typeof this.id !== "undefined" ? this.id : test.data('id')),
testId2 = (typeof this.id !== "undefined" ? this.id : '');
if (testId2 == '') {
testId2 = test.data('id');
}
result1 += testId1 + '.';
result2 += testId2 + '.';
});
$('#result1').html(result1);
$('#result2').html(result2);
对于两个结果分组,我希望其内容为Result1:Test.Test1.Test2.
和Result2:Test.Test1.Test2.
然而,第一个结果div的内容为Result1:Test.Test1..
。
为什么会这样?
答案 0 :(得分:2)
如果元素没有id,则element.id返回一个空字符串,而不是未定义。
可以修复和简化:
var testId1 = this.id ? this.id : test.data('id');
答案 1 :(得分:1)
问题在于第3个元素,即使id
属性不存在,this.id
不是undefined
,它也是空字符串。因此,对于第3个元素test1
获取一个空字符串作为值,但对于test2
,以下if
条件会使用id
数据值更新该值。
一种可能的解决方案是测试id
属性的长度,而不是检查它是否已定义
var result1 = 'Result1:',
result2 = 'Result2:';
$('.test').each(function () {
var test = $(this),
testId1 = ($.trim(this.id || '').length ? this.id : test.data('id')),
testId2 = (this.id !== undefined ? this.id : '');
if (testId2 == '') {
testId2 = test.data('id');
}
result1 += testId1 + '.';
result2 += testId2 + '.';
});
$('#result1').html(result1);
$('#result2').html(result2);
演示:Fiddle
答案 2 :(得分:1)
问题是因为typeof this.id
即使没有设置值,也是string
。
因此,条件typeof this.id !== "undefined"
始终为true,因此两个字段始终只有this.id
作为值。
你应该尝试以下方式:
var test = $(this),
testId1 = (this.id !== "" ? this.id : test.data('id')),
testId2 = (this.id !== "" ? this.id : '');
答案 3 :(得分:0)
试试这个,
var result1 = 'Result1:',
result2 = 'Result2:';
$('.test').each(function () {
var test = $(this),
testId1 = (test.attr('id')!=undefined ? test.attr('id') : test.data('id')),
testId2 = (test.attr('id')!=undefined ? test.attr('id') : '');
if (testId2 == '') {
testId2 = test.data('id');
}
result1 += testId1 + '.';
result2 += testId2 + '.';
});
$('#result1').html(result1);
$('#result2').html(result2);
答案 4 :(得分:-2)
你的错误是html代码,id =“Test2”需要有id标签而不是data-id =“Test2”
<div id="Test" class="test">test</div>
<div id="Test1" class="test">test</div>
<div **id="Test2"** class="test">test</div>
<br />
<div id="result1"></div>
<div id="result2"></div>
这将为您提供您正在寻找的外出。
答案 5 :(得分:-2)
修改此行。
<div data-id="Test2" class="test">test</div> to
<div id="Test2" class="test">test</div>
<强> JsFiddle 强>