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

Question

我正在开发一个现有网站，限制我触摸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]);
    }
});

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