Refactor Select Elements Соответствующий список значений

Question

Я ищу некоторую помощь по написанию кода для сокращения избыточного кода при сохранении ясности.

Учитывая этот HTML (значительно упрощенным от реальной вещи):

<div> 
    <fieldset> 
     <legend>Select Day for Code <span class="typeCode">089</span></legend> 
     <select name="date1" id="date1" class="dateSelect"> 
      <option value="Mon">Monday</option> 
      <option value="Tue">Tuesday</option> 
      <option value="Wed">Wednesday</option> 
      <option value="Thu">Thursday</option> 
      <option value="Fri">Friday</option> 
     </select> 
    </fieldset> 
    <fieldset> 
     <legend>Select Day for Code <span class="typeCode">087</span></legend> 
     <select name="date2" id="date2" class="dateSelect"> 
      <option value="Mon">Monday</option> 
      <option value="Tue">Tuesday</option> 
      <option value="Wed">Wednesday</option> 
      <option value="Thu">Thursday</option> 
      <option value="Fri">Friday</option> 
     </select> 
    </fieldset> 
</div> 

Я хотел увидеть, в какие дни были отобраны для конкретных кодов. Использование JQuery, я мог бы использовать что-то вроде этого:

$(
    "div fieldset:has(.typeCode):contains(061) .dateSelect option:selected," + 
    "div fieldset:has(.typeCode):contains(064) .dateSelect option:selected," + 
    "div fieldset:has(.typeCode):contains(065) .dateSelect option:selected", + 
    "div fieldset:has(.typeCode):contains(089) .dateSelect option:selected," + 
    "div fieldset:has(.typeCode):contains(090) .dateSelect option:selected" 
).each(
    function(index) { 
     doSomethingHere(); 
    } 
); 

Тем не менее, кажется, что там должен быть способ, чтобы упростить этот селектор. Нечто подобное было бы хорошо, но это не представляется возможным:

$(
    "div fieldset:has(.typeCode):contains([061,064,065,089,090]) .dateSelect option:selected" 
).each(
    function(index) { 
     doSomethingHere(); 
    } 
); 

Все, что я могу придумать что-то вроде этого:

var typeCodes = ["061", "064", "065", "089", "090"]; 

$("div fieldset:has(.typeCode)").each(
    function(index) { 
     var code = $(this).find(".typeCode").text(); 
     if ($.inArray(code, typeCodes) > -1) { 
      var dateSelected = $(this).find(".dateSelect option:selected"); 
      doSomethingHere(); 
     } 
    } 
); 

Это исключает дублирование кода, но на стоимость уменьшенной ясности.

Есть ли лучший способ сделать что-то подобное?

Answer 1

Я бы бросить typecode на каждом fieldset как пользовательский атрибут data-* - filter из тех, которые вы не хотите - проверьте select ..

HTML:

<fieldset data-typecode="089"> 
    <legend>Select Day for Code <span class="typeCode">089</span></legend> 
    <select name="date1" id="date1" class="dateSelect"> 
     <option value="Mon">Monday</option> 
     <option value="Tue">Tuesday</option> 
     <option value="Wed">Wednesday</option> 
     <option value="Thu">Thursday</option> 
     <option value="Fri">Friday</option> 
    </select> 
</fieldset> 

И в JS:

var typeCodes = ["061", "064", "065", "089", "090"]; 

$("fieldset[data-typecode]").filter(function() { 
    //Get fieldsets with typecodes in above array and with selected options 
    var code = $(this).data("typecode"); 
    return typeCodes.indexOf(code) > -1 && $(this).find("select option:selected").length 
}).each(function() { 
    //Do something on each fieldset 
});