javascript - How to know the position of element with reference to another element

Question

I am having static input element and I am adding dynamic input elements below the static element.

Please let me know how can I know the position of static element with reference to the dynamic input element which got changed. I want to get position of static input with reference to the change in dynamic input element.

<div>
<input type="text" class="form-control" id="tbxSave" style="width:150px;">
</div>
<div>
<div>
<tbody id=gridBody>
<tr>
<th>
<input type="text" class="form-control clsTbxValue" style="width:200px; height:20px;">
</th>
</tr>
<tr>
<th>
<input type="text" class="form-control clsTbxValue" style="width:200px; height:20px;">
</th>
</tr>
<tr>
<th>
<input type="text" class="form-control clsTbxValue" style="width:200px; height:20px;">
</th>
</tr>
</tbody>
</div>

<script>
 $(document).ready(function () {
    $("#gridBody").on("change",".clsTbxValue", function () {
    var txtBxPos=$("#tbxSave").position();
    });
});
</script>

but with the above code snippet, I am always getting the same position.

For example, I am trying to change the input in 3rd row, I need to get the distance like position.top() from current textbox to tbxSave input textbox. But with the current logic, I am always getting the same position.top() from any element which got changed.

Please let me know how can we achieve.

question from:https://stackoverflow.com/questions/66055154/how-to-know-the-position-of-element-with-reference-to-another-element

Answer 1

You can use .offset.top and .offset.left and subtract them with the element which is currently changed offsets values to get required results.

Demo Code :

$(document).ready(function() {
  $("#gridBody").on("change", ".clsTbxValue", function() {
    //get top distance 
    var txtBxPos_From_top = $(this).offset().top - $("#tbxSave").offset().top;
    //get top distance 
    var txtBxPos_from_left = $(this).offset().left - $("#tbxSave").offset().left;
    console.log(" Left --> " + txtBxPos_from_left)
    console.log(" Top --> " + txtBxPos_From_top)

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" class="form-control" id="tbxSave" style="width:150px;">
</div>
<div>
  <div>
    <table>
      <tbody id=gridBody>
        <tr>
          <th>
            <input type="text" class="form-control clsTbxValue" style="width:200px; height:20px;">
          </th>
        </tr>
        <tr>
          <th>
            <input type="text" class="form-control clsTbxValue" style="width:200px; height:20px;">
          </th>
        </tr>
        <tr>
          <th>
            <input type="text" class="form-control clsTbxValue" style="width:200px; height:20px;">
          </th>
        </tr>
      </tbody>
    </table>
  </div>