jquery - 将 tabindex attr 添加到特定输入

Question

我有一个问题，我正在尝试修改表单的选项卡顺序，而 HTML 超出了我的控制范围，因此我需要使用 JQuery 修改代码，以我想要的方式制作表单选项卡。

这是我无法更改的 html 代码:

<div class="form1">
    <label>First Name</label>
    <input id="field1" class="field1" type="text" value="" name="Initials">
</div>

我认为这个 JQuery:

$(document).ready(function() {
        $("#field1").attr("tabindex","1");
});

会生成:

<div class="form1">
   <label>First Name</label>
   <input id="field1" class="field1" tabindex="1" type="text" value="" name="Initials">
</div>

但我很奇怪它什么也没做。

我需要定位更多输入，并且所有输入都带有随机 ID :(

<小时/>

其他信息。

该表单是由(我更改了一些值但希望它有意义)生成的:

<script type="text/javascript" src="https://XXX.com/widget.js"></script>
<script type="text/javascript">
var widget_config = {
   widgetId: 'XX',
   campaignId: 'XX',
   clientId: 'XX',
   trackingId: 'website',
   baseUrl: 'https://XXX.com'
}

var display_config7 = {
   cssId: 1,
   'background-color': '#',
   'font-family': 'Times New Roman',
   'color': '#000000',
   'font-size': '12px',
   'width': 400,
   'height': 600
}

widget.init('#widget_XXX', widget_config_XXX, display_config_XXX);

</script>

将 JQuery 添加到页面并不针对生成的此代码，因此我尝试将其添加到脚本本身中，但这也不起作用:

<script type="text/javascript" src="https://XXX.com/widget.js"></script>
<script type="text/javascript">
var widget_config = {
   widgetId: 'XX',
   campaignId: 'XX',
   clientId: 'XX',
   trackingId: 'website',
   baseUrl: 'https://XXX.com'
}

var display_config7 = {
   cssId: 1,
   'background-color': '#',
   'font-family': 'Times New Roman',
   'color': '#000000',
   'font-size': '12px',
   'width': 400,
   'height': 600
}

widget.init('#widget_XXX', widget_config_XXX, display_config_XXX);

$("#field-Initials").attr("tabindex","1");
$("#field-Surname").attr("tabindex","2");

</script>

Answer 1

yet i was wrog it did nothing.

不，它完全符合您的期望。它将 tabindex="1" 属性设置为具有 id="field1" 的元素。只是它直接在 DOM 中执行。如果您查看页面的源代码，您将看到服务器发送的原始 HTML。使用 DOM 检查工具，例如 FireBug查看修改。

就随机 id 而言，这取决于您想要应用 tabindex 的顺序。您可以选择所有输入字段，例如 $('input')，然后增加 tabindex，但这样索引的设置顺序将与输入在 DOM 中出现的顺序相同，因此这可能需要根据您的具体需求进行调整:

$(function() {
    $('input').attr('tabindex', function(index, attr) {
        return index + 1;
    });
});