我正在一个现有的网站上工作,这使我无法接触HTML代码。在下面的代码中,有3行具有相同的CLASS(sameRow)。行号可能因大小写而异。每行内部包含具有唯一ID的DIV和具有相同CLASS(sameSelect)的相应SELECT元素。
我的目标输出是能够创建JS / Jquery代码以将这些唯一的div ID分别存储在数组中,并在警报中显示每个ID。目前,我下面的代码仅显示第一个DIV的ID。不显示第二个和第三个。我的代码有什么问题?
任何帮助是极大的赞赏。小提琴链接在这里-> https://jsfiddle.net/philcyb/crkLgxhd/
HTML:
<div class="sameRow">
<div id="uniquediv1">
<select class="sameSelect">
<option>1</option>
<option selected>2</option>
</select>
</div>
</div>
<br />
<div class="sameRow">
<div id="uniquediv2">
<select class="sameSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option selected>4</option>
</select>
</div>
</div>
<br />
<div class="sameRow">
<div id="uniquediv3">
<select class="sameSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected>6</option>
</select>
</div>
</div>
JS / JQuery:
$(document).ready(function(){
var optionValue = new Array();
var rows = document.querySelectorAll('.sameRow').length;
alert("there are " + rows + " rows");
for(i = 0; i < rows; i++ ) {
optionValue[i] = $(".sameSelect").parent().attr("id");
alert("array row number " + i + " is " + optionValue[i]);
}
});
只需使用 eq
$(document).ready(function(){
var optionValue = new Array();
var rows = document.querySelectorAll('.sameRow').length;
alert("there are " + rows + " rows");
for(i = 0; i < rows; i++ ) {
optionValue[i] = $(".sameSelect").parent().eq(i).attr("id");
alert("array row number " + i + " is " + optionValue[i]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="sameRow">
<div id="uniquediv1">
<select class="sameSelect">
<option>1</option>
<option selected>2</option>
</select>
</div>
</div>
<br />
<div class="sameRow">
<div id="uniquediv2">
<select class="sameSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option selected>4</option>
</select>
</div>
</div>
<br />
<div class="sameRow">
<div id="uniquediv3">
<select class="sameSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected>6</option>
</select>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句