jquery - 如何使用 jQuery 替换 label 标签中的 HTML

Question

我有一个 label 和一个 select 下拉列表:

<label for="serviceID[1]">Service</label>
<select name="serviceID[1]" id="serviceID[1]" class="jq__pickedNewService">
<option value="" selected="selected">No Service Selected</option>
<option value="004">Service 1</option>
<option value="001">Service 2</option>
<option value="005">Service 3</option>
<option value="002">Service 4</option>
</select>

我已经尝试了各种 jquery 代码来替换 label 标签内的 HTML，但我没有成功:

$('.jq__pickedNewService').change(function(){
  var i = 1; //for the sake of this example
  $('select.jq__pickedNewService[name="serviceID\\[' + i + '\\]"]').closest('label').html('Service Replaced'); // does not work
  $('#serviceID\\[' + i + '\\]').closest('label').html('Service Replaced'); // does not work
  $('#serviceID[1]').closest('label').html('Service Replaced'); // does not work
}); // end pickedNewService

Answer 1

.closest()搜索元素及其父元素。 <label>是<select> previous sibling 姐妹，所以你可以使用 .prev()相反:

Small example .

$('[id="serviceID[1]"]').prev('label').html('Service Replaced');

还值得一提的是，自<select> ID中有括号，您可以使用[id="serviceID[1]"]选择它, 但不是 #serviceID[1] .

作为full example的 change事件处理程序:

$('.jq__pickedNewService').on("change", function()
{
    $(this).prev('label').html('Service Replaced');
});