Выбрать элементы по индексу в названиях элементов

Доброе утро. У меня есть форма, которая разделена на пронумерованные разделы. Иногда мне нужно отключить некоторые из этих разделов, используя их номера разделов. Прямо сейчас, когда функция получает массив номеров секций, я запускаю цикл для их сбора по одному. Есть ли лучший, более эффективный способ сбора нумерованных разделов по номерам разделов с помощью 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

источник

2013-07-29 DeadMoroz

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'); 
    } 
});

источник

2013-07-29 08:39:22 DrColossos

Это почти идеально :) А если sectionNumbers это единственное число вместо массива? Я использую флаг enable для включения некоторых (не всех), ранее отключенных разделов или разделов, которые по умолчанию отключены. – DeadMoroz

Это работает только с массивом чисел (или пустым массивом). Вы можете добавить проверку переменной, чтобы увидеть, является ли это массивом. – DrColossos

Один из способов будет

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

источник

2013-07-29 08:40:12

Выбрать элементы по индексу в названиях элементов

ответ

Смежные вопросы