How to store parent ids of elements with the same class in an array and display these stored ids in an alert
I am working on an existing site that restricts me to touch HTML code. The code below has 3 rows with the same class (sameRow). Line numbers may differ from case to case. Each row contains a DIV with a unique ID and a corresponding SELECT element with the same CLASS (sameSelect).
My target output is to create some JS / JQuery code to store these unique div IDs in an array and display each ID in an alert. Currently my code below only shows the ID of the first DIV. The second and third are not displayed. What could be wrong with my code?
Any help is appreciated. Link here -> 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]);
}
});
source to share
Just use 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>
source to share
$(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]);
});
});
I think there is no need for an array in this case, which you can use
$(document).ready(function(){
$('.sameRow').each(function(i){
var getID = $(this).find('.sameSelect').parent().attr("id");
alert("array row number " + (i + 1) + " is " + getID);
});
});
source to share