Question

我正在开发一个限制我触摸HTML代码的现有网站。在下面的代码中，有3行具有相同的CLASS（sameRow），行号可能因情况而异。每行内部包含具有唯一ID的DIV和具有相同CLASS（sameSelect）的相应SELECT元素。

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

非常感谢任何帮助。这里的小提琴链接 - ＆gt; 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>

Answer 2

$(document).ready(function(){
        var optionValue = new Array();
        $('.sameRow').each(function(i){
            optionValue[i] = $(this).find('.sameSelect').parent().attr("id");
            alert("array row number " + (i + 1) + " is " + optionValue[i]);
        });
    });

JSFIDDLE

我认为在这种情况下不需要你可以使用的数组

$(document).ready(function(){
        $('.sameRow').each(function(i){
            var getID = $(this).find('.sameSelect').parent().attr("id");
            alert("array row number " + (i + 1) + " is " + getID);
        });
    });

JSFIDDLE

如何在Array中存储具有相同CLASS的元素的父ID，并在alert中显示这些存储的ID

2 个答案: