Question

Let’s say that

• I have Multiple DIVs elements.
  I cannot tell how much DIVs I have
  
  Because they are generated by other app.

• Anyway, as it is pure HTML elements,
  
  I want to iterate through every DIVs by using Jquery
  Because I want to access every dropdownlists which is inside of each DIVs.

.

/// I want to iterate each and every Divs 
/// by using loop
for(int i=0; i<DIVs.Count; i++){       

/// I want to access each and every html dropdowns
/// I want to get each and every selected dropdown value
for(int j=0; j<DIVs[i].DropdownList.Count; j++){
    alert(DIVs[i].DropdownList[j].SelectedValue);
}

/// Then finally , I want to get hidden productID
alert(Divs[i].HiddenProductID);
}

So could anyone give me suggestion how could I change my upper algorithm to jquery code.

I also upload my html to jsfiddle site so that everyone can see obvious.

Every suggestion will be really appreciated.

Answer 1

If you need to get two separated arrays of values and IDs, you can simply use this code:

var values = [];
$(".dynamicDropDownList").each(function (index) {
    var selectValue = this.value;
    values.push(selectValue);
    console.log(index + " - " + selectValue);
});
var productIds = [];
$("._class_hidden_Product_ID_").each(function (index) {
    var productId = this.value;
    productIds.push(productId);
    console.log("Product " + index + "'s id is " + productId);
});

If you need ’em paired you can use something like this:

var products = [];
$("._Individual_Product_").each(function () {
    var $this = $(this);
    products.push({
        selectValue: $this.find(".dynamicDropDownList").val(),
        productId: $this.find("._class_hidden_Product_ID_").val()
    });
});

Also, you actually can tell how many divs are there. Any jQuery object has length property, that tells you the exact number of matched DOM elements. So $("._Individual_Product_").length will return needed number.