thymeleaf的Jquery选择器

Question

如何从下面的div中的隐藏字段获取值:

<div class="col-lg-6" th:each="devicedit : ${eachdevicedetails}">
  <div class="courses-container">
    <div class="course">
      <div
        class="course-preview"
        th:style="${devicedit.color} == 'Green' ? 'background: #03CB61' : 'background: #F22A54'"
      >
        <input type="hidden" name="hiddenDiviceId" th:value="${devicedit.id}" />
        <h6 th:text="${devicedit.area}"></h6>
        <h2 th:text="${devicedit.country}"></h2>
        <br /><br />
        <h6 th:text="${devicedit.state}"></h6>
      </div>
      <div class="course-info">
        <div class="progress-container">
          Status :
          <span
            class="badge badge-pill badge-success"
            th:style="${devicedit.color} == 'Green' ? 'background: #03CB61' : 'background: #F22A54'"
            th:text="${devicedit.color} == 'Green' ? 'Active' : 'Inactive'"
          ></span>
        </div>
        LastUpdate :
        <h6 th:text="${devicedit.lastupdatedon}"></h6>
        <h2 th:text="${devicedit.device_Name}"></h2>
        <br />
        <button
          onclick="openModal(this)"
          id="pickerMaster"
          class="btn btn-primary"
        >
          Detail View
        </button>
      </div>
    </div>
  </div>
</div>

我使用下面的jQuery代码获取值，但我只能选择第一个div的值:

$("#pickerMaster").click(function () {
  var divid = $(this)
    .closest("div.course")
    .find("input[name='hiddenDiviceId']")
    .val();
  console.log(divid);
});

Answer 1

为此，您应该为button设置类，并将其用于获取输入值:

<button onclick="openModal(this)" class="btn btn-primary pickerMaster">Detail View</button>

和:

$(".pickerMaster").click(function() {
var divid = $(this).closest("div.course").find("input[name='hiddenDiviceId']").val();
console.log(divid);
});