Get outerHTML from an HTMLCollection-CodePudding

I already know that we can get outerHTML if the element can access direly like

    var htmlString = $('#mySelectBox').outerHTML;

What if the element can't access directly because it is generated from a framework like ASP Entity Framework and we do not have direct access to that element but to one of its grand parents, like

    $('#table-body:first-child').closest('select').children;

This children property returns an HTMLCollection and is there a way to get outerHTML of each child of that HTMLCollection.

    var optionsHTMLCollection = $('#table-body:first-child').closest('select').children;

I tried this, but failed.

    var optionsAsHTMLString = '';
    for (var i=0; i<optionsHTMLCollection.length; I  ) {
       optionsAsHTMLString 
    }

Update 1(Because @Twisty is asking for more HTML in the comments below. I'm pasting as it is. Later I will minimize more)

<table >
    <thead >
        <tr>
            <th scope="col">Seq No</th>
            <th scope="col">Item Category</th>
            <th scope="col">Percentage (%)</th>
            <th scope="col">Item Name</th>
            <th  scope="col">Actions</th>
        </tr>
    </thead>
    <tbody id="table-body">
        <tr>
            <th scope="row">1</th>
            <td>
                <select 
                    data-val="true" data-val-required="The ItemCatId field is required."
                    id="PolyCombItemCatBridgeList_0__ItemCatId" name="PolyCombItemCatBridgeList[0].ItemCatId">
                    <option selected>-- select product finishing type --</option>
                    <option value="1">HIGH DENSITY POLYETHYLENE</option>
                    <option value="2">LINEAR LOW DENSITY POLYETHYLENE</option>
                </select>
                <b><span  for=""></span></b>
            </td>
            <td>
                <input type="text"  placeholder="Percentage" data-val="true"
                    data-val-number="The field Percentage must be a number."
                    data-val-range="Percentage is between 0% and 100%" data-val-range-max="100" data-val-range-min="0"
                    data-val-required="The Percentage field is required." id="PolyCombItemCatBridgeList_0__Percentage"
                    name="PolyCombItemCatBridgeList[0].Percentage" value="">
                <b><span  for="BagType.Isactive"></span></b>
            </td>
            <td >
                <div>
                    <button type="button" ><i
                            ></i> Delete</button>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">1</th>
            <td>
                <select  
                    data-val="true" data-val-required="The ItemCatId field is required."
                    id="PolyCombItemCatBridgeList_1__ItemCatId" name="PolyCombItemCatBridgeList[1].ItemCatId">
                    <option selected>-- select product finishing type --</option>
                    <option value="1">HIGH DENSITY POLYETHYLENE</option>
                    <option value="2">LINEAR LOW DENSITY POLYETHYLENE</option>
                </select>
                <b><span  for=""></span></b>
            </td>
            <td>
                <input type="text"  placeholder="Percentage" data-val="true"
                    data-val-number="The field Percentage must be a number."
                    data-val-range="Percentage is between 0% and 100%" data-val-range-max="100" data-val-range-min="0"
                    data-val-required="The Percentage field is required." id="PolyCombItemCatBridgeList_1__Percentage"
                    name="PolyCombItemCatBridgeList[1].Percentage" value="">
                <b><span  for="BagType.Isactive"></span></b>
            </td>
            <td >
                <div>
                    <button type="button" ><i
                            ></i> Delete</button>
                </div>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td  colspan="4" style="text-align: right;">
                Need To Add New Row?
            </td>
            <td >
                <div >
                    <button id="add-row" type="button" > </button>
                </div>
            </td>
        </tr>
    </tfoot>
</table>

I want to target the first select box which is in the first row and to get its all option childrens to a string variable with all the markup to concatenate into a html template mentioned below. All the Ids, name=, ... are generated by ASP MVC. That is why is looks complex.

HTML TEMPLATE

                   `<tr>
                        <th scope="row">1</th>
                        <td>
                            <select  data-val="true" data-val-required="The ItemCatId field is required." id="PolyCombItemCatBridgeList_`  row_count  `__ItemCatId" name="PolyCombItemCatBridgeList[`   row_count   `].ItemCatId">
                                `
                                  select_items_list  
                                `
                            </select>
                            <b><span  for=""></span></b>
                        </td>
                        <td>
                            <input type="text"  placeholder="Percentage" data-val="true" data-val-number="The field Percentage must be a number." data-val-range="Percentage is between 0% and 100%" data-val-range-max="100" data-val-range-min="0" data-val-required="The Percentage field is required." id="PolyCombItemCatBridgeList_`  row_count   `__Percentage" name="PolyCombItemCatBridgeList[`   row_count   `].Percentage" value="">
                            <b><span  for="BagType.Isactive"></span></b>
                        </td>
                        <td >
                            <div>
                                <button type="button" ><i ></i> Delete</button>
                            </div>
                        </td>
                    </tr>`

Here row_count, select_items_list are string variables

CodePudding user response：

Consider the following.

$(function() {
  $(".table .form-select").each(function(i, sel) {
    console.log($(sel).attr("id"));
    $("option", sel).each(function(j, el) {
      console.log($(el).prop("outerHTML"));
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table >
  <thead >
    <tr>
      <th scope="col">Seq No</th>
      <th scope="col">Item Category</th>
      <th scope="col">Percentage (%)</th>
      <th scope="col">Item Name</th>
      <th  scope="col">Actions</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <th scope="row">1</th>
      <td>
        <select  data-val="true" data-val-required="The ItemCatId field is required." id="PolyCombItemCatBridgeList_0__ItemCatId" name="PolyCombItemCatBridgeList[0].ItemCatId">
          <option selected>-- select product finishing type --</option>
          <option value="1">HIGH DENSITY POLYETHYLENE</option>
          <option value="2">LINEAR LOW DENSITY POLYETHYLENE</option>
        </select>
        <b><span  for=""></span></b>
      </td>
      <td>
        <input type="text"  placeholder="Percentage" data-val="true" data-val-number="The field Percentage must be a number." data-val-range="Percentage is between 0% and 100%" data-val-range-max="100" data-val-range-min="0" data-val-required="The Percentage field is required."
          id="PolyCombItemCatBridgeList_0__Percentage" name="PolyCombItemCatBridgeList[0].Percentage" value="">
        <b><span  for="BagType.Isactive"></span></b>
      </td>
      <td >
        <div>
          <button type="button" ><i
                            ></i> Delete</button>
        </div>
      </td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td>
        <select  data-val="true" data-val-required="The ItemCatId field is required." id="PolyCombItemCatBridgeList_1__ItemCatId" name="PolyCombItemCatBridgeList[1].ItemCatId">
          <option selected>-- select product finishing type --</option>
          <option value="1">HIGH DENSITY POLYETHYLENE</option>
          <option value="2">LINEAR LOW DENSITY POLYETHYLENE</option>
        </select>
        <b><span  for=""></span></b>
      </td>
      <td>
        <input type="text"  placeholder="Percentage" data-val="true" data-val-number="The field Percentage must be a number." data-val-range="Percentage is between 0% and 100%" data-val-range-max="100" data-val-range-min="0" data-val-required="The Percentage field is required."
          id="PolyCombItemCatBridgeList_1__Percentage" name="PolyCombItemCatBridgeList[1].Percentage" value="">
        <b><span  for="BagType.Isactive"></span></b>
      </td>
      <td >
        <div>
          <button type="button" ><i
                            ></i> Delete</button>
        </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td  colspan="4" style="text-align: right;">
        Need To Add New Row?
      </td>
      <td >
        <div >
          <button id="add-row" type="button" > </button>
        </div>
      </td>
    </tr>
  </tfoot>
</table>

As you can see, this uses the Selector to find the select element. It then uses Each to iterate each element of that selector. I perform another loop of all child option elements of that select to gather the HTML for each.

CodePudding user response：

Thanks to @epascarello, I understood the problem. I was mixing jQuery with JavaScript. Using only the jQuery Traversing Methods was solved the problem. As the following.

var optionsHTMLCollection = $('#table-body').find('select').prop('innerHTML');

For update 1

var select_items_list = $('#table-body').find('select').prop('innerHTML'); // As per the update 1