Используйте родительский класс и получите среднюю часть дочернего класса

Question

Я работаю с новым кодом SubForm от Joomla. Это позволяет пользователю дублировать набор входов и повторно использовать их. В принципе повторяемая форма. Эта форма создает следующую структуру.

<div class="subform-repeatable-group"> 
    <div class="control-group jform_params__content__content0__dc_subheader-cg"></div> 
    <div class="control-group jform_params__content__content0__dc_typeofcontent-cg"></div> 
    <div class="control-group jform_params__content__content0__dc_toc_image-cg"></div> 
</div> 

Проблема в том, что SubForm загружается внутри родительской формы, но Joomla рассматривает ее как независимую форму. Поэтому нормальные функции Show/Hide больше не работают. Поэтому я должен создать свою собственную.

Что я и то, что не является хорошим

Это генерируемый Select:

<select id="jform_params_theme_selection" name="jform[params][theme_selection]" class="chzn-done"> 
    <option value="3dperspective" selected="selected">3D Perspective</option> 
    <option value="default">Default</option> 
    <option value="notheme">Select a theme!</option> 
</select> 

Я уже получил кусок кода, который будет проверять, если выбран выберите значение на родительской форме ,

$('#jform_params_theme_selection').bind('change', function (e) { 
    if($('#jform_params_theme_selection').val() == 'notheme') { 
    } else if($('#jform_params_theme_selection').val() == 'default') { 
    } else if($('#jform_params_theme_selection').val() == '3dperspective') { 
    } 
}).trigger('change'); 

Теперь я могу Offcourse для каждого элемента добавить его вручную, как это:

$('[class$="__dc_typeofcontent-cg"]').hide(); 

Но должно быть лучше.

Что я хочу.

1. Я хочу использовать функцию .hide() на каждый элемент, который имеет в своем классе __dc_ следующие буквы/символы и имеет в качестве .parents(.subform-repeatable-group)

бит дополнительной информации

1. Существует другой тема, которая не имеет __dc_, но называется __threed_, поэтому я должен уметь определять буквы/символы.
2. Я уже проверил, могу ли я что-то использовать с X количеством позиций спереди или X позиций со спины, но это постоянно меняется.

Спасибо всем за помощь.

Как обычно, я буду продолжать поиск и обновление этого сообщения всякий раз, когда получаю больше результатов.

Answer 1

Может использовать filter() что-то вроде:

var cGroups = $('.subform-repeatable-group .control-group'); 

    var hideTheme = '_dc'; 
    var showTheme = '_threed'; 

    cGroups.filter(function(){ 
    return this.className.indexOf(hideTheme)>-1 
    }).hide() 



    cGroups.filter(function(){ 
    return this.className.indexOf(showTheme)>-1 
    }).show() 

DEMO

Answer 2

Ваш вопрос немного запутанным, поэтому я сосредоточился на то, что вы хотите часть.

Предполагая, что у вас нет большого контроля над классами, которые Joomla выбрасывает там, независимо от того, что вам понадобится, чтобы создать способ захвата родительского класса и дочерней строки, которую вы ищете. Но, предполагая, что у вас есть оба из них, вы можете заставить шоу скрыть несколько общих. Вы всегда можете указать jQ для поиска дочерних элементов с подстрокой внутри родителя.

$("[class*='"+searchclass+"']",parent) 

скрипку для вас: https://jsfiddle.net/dvdxt58f/1/

Answer 3

Наиболее эффективным способом является один предложенный charlietfl, но есть еще один способ решить эту проблему.

(function ($) { 
    $(document).ready(function() { 

     $('#jform_params_theme_selection').bind('change', function (e) { 
     if($('#jform_params_theme_selection').val() == 'notheme') { 
     } else if($('#jform_params_theme_selection').val() == 'default') { 

     $(".subform-repeatable-group div[class*='__threed_']").hide(); 
     $(".subform-repeatable-group div[class*='__dc_']").show();   

     } else if($('#jform_params_theme_selection').val() == '3dperspective') { 

     $(".subform-repeatable-group div[class*='__threed_']").show(); 
     $(".subform-repeatable-group div[class*='__dc_']").hide();   

     } 
    }).trigger('change'); 

    }); 
})(jQuery);  

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

$(".subform-repeatable-group div[class*='__threed_']").hide();

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

Демо: https://jsfiddle.net/tdo9go2q/11/