jQuery - 通过 data-for 属性将 .html(） 设置为 element

jQuery - set .html() to element by it's data-for attribute

本文关键字：设置 element html 通过 data-for 属性 jQuery      更新时间：2023-09-26

请问，有没有办法将内容放入不知道ID或类的元素中，而是通过它的属性？我在页面上的某个地方有更多这个双胞胎： 

<input id="someSpecialId" class="autocomplete"/>
<ul data-for="someSpecialId"></ul>

列表可以位于页面上的任何位置，而不是输入旁边。在jQuery中，我有这个：

$(document).on('keyup', '.autocomplete', function() {
    var sectionName = 'autocomplete';
    var min_length = 2; 
    var inputID = $(this).attr('id');
    var keyword = $(this).val();
    var $output = // HERE I NEED TO PUT FOUND ELEMENT BY IT'S data-for = inputID
    if (keyword.length >= min_length) {
        $.ajax({
            url: 'php/readDB.php',
            type: 'POST',
            data: {section: sectionName, keyword:keyword},
            success:function(data){
                $output.show();
                $output.html(data);
            }
        });
    } else {
        $output.hide();
    }
});

请问你有什么想法吗？非常感谢您的回答。

var $output = $('[data-for="'+inputID+'"]');

该属性等于选择器。

您可以为此使用选择器属性。一般来说，它们看起来像这样：[attribute="value"]在您的情况下，您将使用如下所示的内容：

$('ul[data-for="'+inputID+'"]');

这些在CSS和jQuery中都可以工作。下面是一个代码片段，其中包含两者的示例：

$('[data-for="second_input"]').html("<li>Item</li>");
[data-for="second_input"] {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" id="first_input" />
  <ul data-for="first_input"></ul>
  <input type="text" id="second_input" />
</div>
<ul data-for="second_input"></ul>

相关文章：