javascript - 动态创建 jQuery UI slider : I want to set unique ids for both slider handles to give them custom text

Question

我在 forEach 循环中使用以下代码动态创建 jQuery UI slider :

            // Sets an id for the slider handles, gives them a custom class (makes them appear as circles, centers them)    
            $("#slideRange" + i).find(".ui-slider-handle").attr("id","slideHandle" + i).addClass("customSliderHandle");
            // These two lines set the times below the slider handles.
            $("#timeSlider" + i).find(".slideStartLabel").text(startTime);
            $("#timeSlider" + i).find(".slideEndLabel").text(endTime);   

这成功地为每次迭代生成了以下具有可变时间的 slider :

我想要做的不是在圆形 handle 下方显示时间，而是让时间显示在 handle 中间。最终结果将如下所示(经过照片处理):

然后，时间将在“滑动”事件回调中根据 slider 值进行更新。

我的问题是:如何为两个 slider handle 分配唯一的 id，以便我可以在“幻灯片”回调中独立设置它们的文本？我上面写的代码给出了两个句柄相同的 id。使用此 id 将文本设置为句柄将仅适用于第一个句柄，使我无法更改第二个句柄的文本。使用 find()、get() 或只是 $(".ui-slider-handle") 都是获取 slider 句柄数组的方法，但是当我在其中一个上尝试 attr("id","uniqueId") 时该数组的元素，我得到“(...).method(...) 不是方法”。

或者在这里分配唯一 ID 是错误的方法吗？当按类搜索并可能获得多个结果时，是否有一种 jQuery 或 vanilla Js 方法可以一次设置一个元素的属性？

此外，对于上下文:我使用 find() 是因为我在标记 shell 上使用clone()，然后将其附加到中央 div。这是外壳:

    <!-- This hidden div will be cloned, customized, and appended onto .modal-body -->
<div id="timeslotShell" class="timeslot row" style="display:none">
  <div class="container-fluid slotContents" id="slotContents">
    <span class="col-md-4"> Listing <div class="slotNumber listNum">*Listing No.*</div>: From <div class="slotNumber startNumber slotStartShell"> *Start Time* </div> until 
      <div class="slotNumber endNumber slotEndShell"> *End Time* </div> </span> 
    <div class="col-md-8"> 
      <button type="button" class="btn btn-md btn-info slotButton">
        Choose A Time From Within These Hours
      </button>
    </div>
    <div id="timeSliderShell" class="collapse timeSlider">
      <br><br>
      <div id="slider-range" class="slideRange row"></div>
      <div id="slideLabels" class="slideLabels slideRange row">
        <div class="slideStartLabel"></div><div class="slideEndLabel"></div> 
      </div>  
    </div>          
  </div>
  <br><br>
</div>

Answer 1

酷——幸运的是，我在发布这篇文章后不久就找到了答案。如果您正在处理类似的问题，请查看这篇文章:

Slider Value Display with jQuery UI - 2 handles

在 .find() 调用中所需要的就是

.find(".ui-slider-handle:first").text(value1);

第一个句柄，然后

.find(".ui-slider-handle:last").text(value2);

第二个。