Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Apply row uniqe identifier to all id content columns

Hi all i’m trying to figure out a way to assign a uniqe identifier to each row but keep the ids uniqe identifer the same as each row. Still learning javascript..

for first row:
id=row1, id=addbtn1, id=comment1
for second row:
id=row2, id=addbtn2, id=comment2, id=formAttachment2
for third row:
id=row3, id=addbtn3, id=comment3, id=formAttachment3

<div class="row" id="row" name="row">

    <div class="col-auto" id="col">
        <div id="AddButton">
            <br /><button name="addbtn" type="button" class="btn btn-link addbtn" style="font-size: 11px; margin-top: -40px" id="addbtn"><font color="green"><b>+ Add</b></font></button>
        </div>
    </div>
    <div class="col-auto" id="col">
        <textarea class="form-control" rows="1" id="comment" cols="75" name="comment"></textarea>
    </div>
</div>

<div class="row" id="row" name="row">

    <div class="col-auto" id="col">
        <div id="AddButton">
            <br /><button name="addbtn" type="button" class="btn btn-link addbtn" style="font-size: 11px; margin-top: -40px" id="addbtn"><font color="green"><b>+ Add</b></font></button>
        </div>
    </div>
    <div class="col-auto" id="col">
        <textarea class="form-control" rows="1" id="comment" cols="75" name="comment"></textarea>
    </div>

    <div class="col-auto" id="col">
        <form method="post" enctype="multipart/form-data">
            <div class="mb-4">
                <div class="row">
                    <div class="col-auto">
                        <input type="file" name="file" class="form-control" id="formAttachment" style="width: 500px" />
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="row" id="row" name="row">

    <div class="col-auto" id="col">
        <div id="AddButton">
            <br /><button name="addbtn" type="button" class="btn btn-link addbtn" style="font-size: 11px; margin-top: -40px" id="addbtn"><font color="green"><b>+ Add</b></font></button>
        </div>
    </div>
    <div class="col-auto" id="col">
        <textarea class="form-control" rows="1" id="comment" cols="75" name="comment"></textarea>
    </div>
    <div class="col-auto" id="col">
        <form method="post" enctype="multipart/form-data">
            <div class="mb-4">
                <div class="row">
                    <div class="col-auto">
                        <input type="file" name="file" class="form-control" id="formAttachment" style="width: 500px" />
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


<script>
    $(document).ready(function () {
        var addrow = 0;
        $("[name='row']").each(function () {
            addrow = addrow + 1;
            $(this).attr("id", "row" + addrow);
        });
    });
</script>

i tried manipulating the script each function but have not had any luck yet.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you mykaf i think you pointed me in the correct direction this is what i was looking for i figured it out.

    $(document).ready(function () {
  var addrow = 0;
  $("[name='row']").each(function () {
    addrow = addrow + 1;
    $(this).attr("id", "row" + addrow);
    $(this).find("#formAttachment").attr("id", "formAttachment" + addrow);
  });
});


  2. 0

    First we are getting var $currentRow with $("[name='row']").

    Then in each row e.i $currentRow (which is an element of <div>)

    we are getting addbtn, comment and formAttachemt with id. In case of first $currentRow the formAttachment is not present it won’t do anything for this. for second time in the row it will find the formAttachment and will add current updated number.

    please check and if it fulfills your requirements.

    $(document).ready(function() {
        var addrow = 0;
        $("[name='row']").each(function() {
        addrow = addrow + 1;
        var $currentRow = $(this); 
        $currentRow.attr('id',"row_"+addrow);
        $currentRow.find("[id^='addbtn']").each(function() {
            var $element = $(this); 
            $element.attr('id', "addbtn_" + addrow);
        });

        $currentRow.find("[id^='comment']").each(function() {
            var $element = $(this); 
            $element.attr('id', "comment_" + addrow);
        });

        $currentRow.find("[id^='formAttachment']").each(function() {
            var $element = $(this); 
            $element.attr('id', "formAttachment_" + addrow);
        });
    });
});

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <div class="row" id="row" name="row">

        <div class="col-auto" id="col">
            <div id="AddButton">
                <br /><button name="addbtn" type="button" class="btn btn-link addbtn" style="font-size: 11px; margin-top: -40px" id="addbtn"><font color="green"><b>+ Add</b></font></button>
            </div>
        </div>
        <div class="col-auto" id="col">
            <textarea class="form-control" rows="1" id="comment" cols="75" name="comment"></textarea>
        </div>
    </div>

    <div class="row" id="row" name="row">

        <div class="col-auto" id="col">
            <div id="AddButton">
                <br /><button name="addbtn" type="button" class="btn btn-link addbtn" style="font-size: 11px; margin-top: -40px" id="addbtn"><font color="green"><b>+ Add</b></font></button>
            </div>
        </div>
        <div class="col-auto" id="col">
            <textarea class="form-control" rows="1" id="comment" cols="75" name="comment"></textarea>
        </div>

        <div class="col-auto" id="col">
            <form method="post" enctype="multipart/form-data">
                <div class="mb-4">
                    <div class="row">
                        <div class="col-auto">
                            <input type="file" name="file" class="form-control" id="formAttachment" style="width: 500px" />
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="row" id="row" name="row">

        <div class="col-auto" id="col">
            <div id="AddButton">
                <br /><button name="addbtn" type="button" class="btn btn-link addbtn" style="font-size: 11px; margin-top: -40px" id="addbtn"><font color="green"><b>+ Add</b></font></button>
            </div>
        </div>
        <div class="col-auto" id="col">
            <textarea class="form-control" rows="1" id="comment" cols="75" name="comment"></textarea>
        </div>
        <div class="col-auto" id="col">
            <form method="post" enctype="multipart/form-data">
                <div class="mb-4">
                    <div class="row">
                        <div class="col-auto">
                            <input type="file" name="file" class="form-control" id="formAttachment" style="width: 500px" />
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search