javascript - 如何将具有相同 CLASS 的元素的父 ID 存储在数组中，并在警报中显示这些存储的 ID

Question

我在现有网站上工作，这限制了我接触 HTML 代码。在下面的代码中，有 3 行具有相同的 CLASS (sameRow)，行号可能因情况而异。每行内部包含具有唯一 ID 的 DIV 和具有相同 CLASS (sameSelect) 的相应 SELECT 元素。

我的目标输出是能够创建一个 JS/Jquery 代码来将这些唯一的 div ID 单独存储在数组中，并在警报中显示每个 ID。目前，我下面的代码只显示第一个 DIV 的 ID。第二个和第三个不显示。我的代码可能有什么问题？

非常感谢任何帮助。 fiddle 链接在这里-> 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]);
    }
});

Answer 1

只需使用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>