按元素名称中的索引选择元素

Select elements by index in elements name

本文关键字：元素 索引 选择      更新时间：2023-09-26

早上好。我有一张表格，它被分成几个编号的部分。有时我需要使用它们的节号来禁用其中一些节。现在，当函数接收到一个节号数组时，我会运行一个循环来逐个收集它们。有没有一种更好、更有效的方法可以通过jQuery的节号来收集编号的节？

HTML:

<div id="frameContent">
<div id="section1">
    <select>
        <option value="1" selected="selected">empty (default)</option>
        <option value="2" selected="selected">foo</option>
        <option value="3" selected="selected">bar</option>
    </select>
</div>
<div id="section2">
    <select>
        <option value="1" selected="selected">empty (default)</option>
        <option value="2" selected="selected">foo</option>
        <option value="3" selected="selected">bar</option>
    </select>
</div>
<div id="section3"><select>
    <option value="1" selected="selected">empty (default)</option>
    <option value="2" selected="selected">foo</option>
    <option value="3" selected="selected">bar</option>
</select></div>
<div id="section4">
    <select>
        <option value="1" selected="selected">empty (default)</option>
        <option value="2" selected="selected">foo</option>
        <option value="3" selected="selected">bar</option>
    </select>
</div>
</div>

JS:

var toggleFormSections = function(frameContent, sectionNumbers, enable) {
    // init empty selector
    var sections = $();
    // collect sections
    for(var i = 0; i < sectionNumbers.length; i++) {
        var section = frameContent.find('div#section' + sectionNumbers[i]);
        sections = sections.add(section);
    }
    // disable/enable sections and elements within
    if(sections.length > 0) {
        if(enable) {
            sections.find('select').prop('disabled', false);
        } else {
            sections.find('select').prop('disabled', 'disabled');
        }
    }
}
// usage:
var frameContent = $('#frameContent');
toggleFormSections(frameContent, [2,3], false);

链接到FIDDLE

http://jsfiddle.net/XZ9fT/3/

您可以很容易地使用jQuery的each循环遍历索引元素，而无需检查其长度。我不太确定你为什么要enabled标志。因为你可以用一个空数组来调用它来启用一切。这会使它更短。

$.each(sectionNumbers, function(i) {
  if(enable) {
    frameContent.find('div#section' + sectionNumbers[i] + ' select').prop('disabled', false)
  } else {
    frameContent.find('div#section' + sectionNumbers[i] + ' select').prop('disabled', 'disabled');
  }
});

一种方法是

var toggleFormSections = function(frameContent, sectionNumbers, enable) {
    // init empty selector
    var sections = [];
    // collect sections
    for(var i = 0; i < sectionNumbers.length; i++) {
        sections.push('#section' + sectionNumbers[i]);
    }
    sections = $(sections.join(', '))
    sections.find('select').prop('disabled', !enable);
}

演示：Fiddle

相关文章：