Динамический фильтр - Кодирование JQuery эффективно

Question

Каждый раз, когда пользователь создает новое поле категории создается новый идентификатор для поля

category_advert

#userj_requiredskills_attributes_0_category_advert_id 
#userj_requiredskills_attributes_1_category_advert_id 
#userj_requiredskills_attributes_2_category_advert_id 

category_advertskill

#userj_requiredskills_attributes_0_category_advertskill_id 
#userj_requiredskills_attributes_1_category_advertskill_id 
#userj_requiredskills_attributes_2_category_advertskill_id 

мог один любезно посоветуйте мне, как эффективно кодировать мой JQuery, поэтому нет . Каков идентификатор кода - многие из них кс

html.erb

<%= f.collection_select :category_advert_id, CategoryAdvert.order(:name), :id, :name, {}, {class: 'category_advert'} %> 
    <%= f.grouped_collection_select :category_advertskill_id, CategoryAdvert.order(:name), :category_advertskills, :name, :id, :name, {prompt: "Select a category"}, {class: "category_advertskill"} %> 

Jquery

$(document).ready(function() { 
    var category_advertskills; 
    category_advertskills = $('#userj_requiredskills_attributes_0_category_advertskill_id').html(); 
    return $('#userj_requiredskills_attributes_0_category_advert_id').change(function() { 
    var category_advert, escaped_category_advert, options; 
    category_advert = $('#userj_requiredskills_attributes_0_category_advert_id :selected').text(); 
    escaped_category_advert = category_advert.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1'); 
    options = $(category_advertskills).filter("optgroup[label='" + escaped_category_advert + "']").html(); 
    if (options) { 
     $('#userj_requiredskills_attributes_0_category_advertskill_id').html(options); 
     return $('#userj_requiredskills_attributes_0_category_advertskill_id').parent().show(); 
    } else { 
     $('#userj_requiredskills_attributes_0_category_advertskill_id').empty(); 
     return $('#userj_requiredskills_attributes_0_category_advertskill_id').parent().hide(); 
    } 
    }); 
}); 


$(document).ready(function() { 
    var category_advertskills; 
    category_advertskills = $('#userj_requiredskills_attributes_1_category_advertskill_id').html(); 
    return $('#userj_requiredskills_attributes_01category_advert_id').change(function() { 
    var category_advert, escaped_category_advert, options; 
    category_advert = $('#userj_requiredskills_attributes_1_category_advert_id :selected').text(); 
    escaped_category_advert = category_advert.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1'); 
    options = $(category_advertskills).filter("optgroup[label='" + escaped_category_advert + "']").html(); 
    if (options) { 
     $('#userj_requiredskills_attributes_1_category_advertskill_id').html(options); 
     return $('#userj_requiredskills_attributes_1_category_advertskill_id').parent().show(); 
    } else { 
     $('#userj_requiredskills_attributes_1_category_advertskill_id').empty(); 
     return $('#userj_requiredskills_attributes_1_category_advertskill_id').parent().hide(); 
    } 
    }); 
}); 

Answer 1

Используйте класс для всех категорий и использовать данные атрибуты для типа и ID

<div class="requiredskill" data-user="userj" data-type="advertskill">blah</div> 

И затем из jquery, элементы поиска с этим классом и проверьте дату атрибут.

$(".requiredskill")[0].data("user"); //userj 

Вы можете сопоставить конкретные значения данных в селекторе так:

$(".requiredskill[data-user=userj][data-type=advertskill]") 

Answer 2

Пуск с помощью переменных для хранения тех дублируют милю длиной селекторов вместо того, чтобы делать то же селектор снова и снова. $(this) внутри события change также будет тем же самым элементом, который вы продолжаете ссылаться. Затем вы можете использовать селектор starts-with для матчей.

например. что-то вроде:

$(document).ready(function() { 
    var category_advertskills = $('[id^="userj_requiredskills_attributes_"]'); 
    category_advertskills.change(function() { 
    var $this = $(this); 
    var category_advert = $this.find(':selected').text(); 
    var escaped_category_advert = category_advert.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1'); 
    var options = category_advertskills.filter("optgroup[label='" + escaped_category_advert + "']").html(); 
    if (options) { 
     $this.html(options); 
     $this.parent().show(); 
    } else { 
     $this.empty(); 
     $this.parent().hide(); 
    } 
    }); 
}); 

Вы также, кажется, есть некоторые нежелательные возвращения, которые не будут использоваться в готовом обработчиком DOM.