向特定输入添加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

但我错了，它什么也没做。

不，它完全按照你的期望去做。它将tabindex="1"属性设置为具有id="field1"的元素。只是它直接将其放入DOM中。如果您查看页面的源代码，您将看到服务器发送的原始HTML。使用像FireBug这样的DOM检查工具来查看修改。

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

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