如何选择ID并在此行的输入数据中获取ID的值？

Question

here is what I want to do.

When I click the modify button, I wish div that contains role of 'ucomment' changes into in-line input form with its original value typed.

But I can't even start with selecting the div.

I thought the code here would work and could select what I aimed, but it didn't.

$(this).closest("div[role='ucomment']")

How can I select the div here?

<ul id="comments" class="list-group">
<script id="commentTemplate" type="text/x-handlebars-template">
    {{#each list}}
      <li class="list-group-item d-flex justify-content-between align-items-center">
          <div class="row w-100">
            <div class="col-2" name="uid">{{uid}}</div>
            <div class="col-8" role="ucomment" name="ucomment">{{ucomment}}</div>
            <div class="col-2" name="regdate">{{prettifyDate regdate}}</div>
          </div>
            <button type="button" class="btn" onclick="modifyComment()">Modify</button> 
            <button type="button" class="btn" onclick="deleteComment()">Delete</button> 
        <span class="badge badge-primary badge-pill">14</span>
      </li>
    {{/each }}
</script>
</ul>
        <button id="sendForm" type="submit" class="btn btn-info" onclick="addComment()">Send</button>
        <button id="cancel" type="button" class="btn btn-warning" data-toggle="collapse" data-target="#openNew">Cancel</button>
    </div>

Answer 1

This should find you the div :

this.closest("li").querySelector("div[role='ucomment']")

closest() works only upwards in the DOM. It traverses the parent elements. So what you can find using it is li , from there you can use find() using the selector div[role='ucomment'] you tried to pass to closest() .

 // get a NodeList containing alls modify buttons and convert it to an array const modifyBtns = Array.from(document.querySelectorAll('.btn.btn-modify')); // iterate over each button... for (const modifyBtn of modifyBtns) { // and attach an event listener for click, binding the handler to each modifyBtn modifyBtn.addEventListener('click', modifyComment.bind(modifyBtn)); } function modifyComment(e) { this.closest("li").querySelector("div[role='ucomment']").style.color= 'red'; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="row w-100"> <div class="col-8" role="ucomment" name="ucomment1">{{ucomment}}</div> </div> <button type="button" class="btn btn-modify">Modify</button> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="row w-100"> <div class="col-8" role="ucomment" name="ucomment2">{{ucomment}}</div> </div> <button type="button" class="btn btn-modify">Modify</button> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="row w-100"> <div class="col-8" role="ucomment" name="ucomment1">{{ucomment}}</div> </div> <button type="button" class="btn btn-modify">Modify</button> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="row w-100"> <div class="col-8" role="ucomment" name="ucomment2">{{ucomment}}</div> </div> <button type="button" class="btn btn-modify">Modify</button> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="row w-100"> <div class="col-8" role="ucomment" name="ucomment1">{{ucomment}}</div> </div> <button type="button" class="btn btn-modify">Modify</button> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="row w-100"> <div class="col-8" role="ucomment" name="ucomment2">{{ucomment}}</div> </div> <button type="button" class="btn btn-modify">Modify</button> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="row w-100"> <div class="col-8" role="ucomment" name="ucomment1">{{ucomment}}</div> </div> <button type="button" class="btn btn-modify">Modify</button> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="row w-100"> <div class="col-8" role="ucomment" name="ucomment2">{{ucomment}}</div> </div> <button type="button" class="btn btn-modify">Modify</button> </li> </ul> 

Edit: By the looks of it using the in line eventhandler onclick won't pass the event, so I changed your code to vanilla JS instead of jQuery (apparently closest in jQuery doesn't work the way plain JS closest works). Since using inline event handlers is considered bad practice anyway (that's what addEventListener() is for), you should change that anyway.

Answer 2

Can't you use plain javascript for this?

document.getElementsByName("ucomment")[0];

Let me know if this works.

Then you can use jQuery's click function to get the clicking element and check if the clicked element is a "div" and do whatever the things you want to do.

$("*", document.body).click(function(e) {
  e.stopPropagation();
  var domElement = $(this).get(0);
  if (domElement.tagName == "div") {
    //do what you want to do here
   }
});

Answer 3

When you click on button that call modifyComment() you need up to parent and find your div. try to change html onclick and function

<button type="button" class="btn" onclick="modifyComment(this)">Modify</button>

    function modifyComment(elem) {
            let parent = $(elem).parent();

            parent.find($("div[role='ucomment']")).css("background", "red");
            console.log(parent);
        }

Or if you change html button then inside function modifyComment

$(element).parent().find("div[role='ucomment']").css("background-color","red")