jQuery ID选择与React生成组件[重复]

6rqinv9w 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(122)

此问题已在此处有答案：

jQuery dot in ID selector? [duplicate]（6个回答）
How to select html nodes by ID with jquery when the id contains a dot?（8个回答）
上个月关门了。
我正在尝试为Zendesk创建一些书市--我遇到的一个问题是使用jQuery进行ID选择。
给定以下HTML：

<label data-garden-id="forms.input_label" data-garden-version="8.69.11" id="64val-field_2.1.0--label" for="64val-field_2.1.0--input" data-garden-container-id="containers.field" data-garden-container-version="2.1.0" class="sc-1gau0qu-1 gGZrXf StyledLabel-sc-2utmsz-0 bYrRLL">Project ID</label>
<input data-garden-id="forms.input" data-garden-version="8.69.11" aria-invalid="false" id="64val-field_2.1.0--input" aria-labelledby="64val-field_2.1.0--label" data-test-id="ticket-fields-text-field" data-tracking-id="ticket-fields-text-field" type="text" class="sc-1gau0qu-2 gEiOHk StyledTextInput-sc-k12n8x-0 bXXlCE" value="foo">

我认为找到输入字段值的最简单方法是使用标签for属性。

$("label:contains('Project ID')").attr("for") // returns '65val-field_2.1.0--input'

我假设我可以通过前置'#'来使用它作为直接的ID选择器。
但是它在直接id选择器上失败了：

$('#' + $("label:contains('Project ID')").attr("for")); // the length is `0`

这适用于：

document.getElementById($("label:contains('Project ID')").attr("for"));

它还适用于：

$('input[id="'+ $("label:contains('Project ID')").attr("for") + '"]')[0]

虽然我可以用getElementByID来解决这个问题，但我很好奇为什么jQuery选择器不起作用--我是不是漏掉了什么明显的东西？

jquery

来源：https://stackoverflow.com/questions/77114940/jquery-id-selection-with-react-generate-components

1条答案

按热度按时间

hc2pp10m1#

你需要escape the selector。罪魁祸首是64val-field_2.1.0--input（id和for属性值中的点字符）。
下面是我创建的一个jQuery插件，它返回与标签相关联的输入。

(function() {
  $.formElementByLabel = function(label) {
    var $label = $('label:contains("' + label + '")');
    var formElementId = $label.attr("for");
    return $('#' + $.escapeSelector(formElementId));
  };
})(jQuery)

const $input = $.formElementByLabel("Project ID");

console.log($input.val()); // foo

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="sc-1gau0qu-1 gGZrXf StyledLabel-sc-2utmsz-0 bYrRLL" id="64val-field_2.1.0--label" for="64val-field_2.1.0--input" data-garden-id="forms.input_label" data-garden-version="8.69.11" data-garden-container-id="containers.field" data-garden-container-version="2.1.0">Project ID</label>
<input type="text" class="sc-1gau0qu-2 gEiOHk StyledTextInput-sc-k12n8x-0 bXXlCE" id="64val-field_2.1.0--input" value="foo" data-garden-id="forms.input" data-garden-version="8.69.11" aria-invalid="false" aria-labelledby="64val-field_2.1.0--label" data-test-id="ticket-fields-text-field"
  data-tracking-id="ticket-fields-text-field">

赞(0）回复(0）举报 2023-10-17

我来回答

jQuery ID选择与React生成组件[重复]

1条答案

相关问题

热门标签

最新问答