Как фильтровать «видимые» элементы jQuery, спрятанные другими элементами?

Question

Ну у меня есть этот вопрос, я хочу, чтобы фильтровать выбор элементов (например, органы управления формы) с помощью

$controls = $(document).find('.control'); 
$controls.filter('[required]:visible'); 

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

Проблема заключается в том, когда у меня есть группа элементов скрытой, но элементы являются видимыми, например:

<div class="group" style="display:none"> 
    <div class="control" id="control1" required> 
     <input type="text" /> 
    </div> 
    <div class="control" id="control2" required> 
     <input type="text" /> 
    </div> 
... 
    <div class="control" id="control3"> 
     <input type="text" /> 
    </div> 
</div> 

Когда я фильтровать элементы управления, я не получаю ничего, потому что «группа» скрывая все.

Как его решить? (Я знаю, как, но вопрос о простоте '[required]:visible', я хочу ответить так, с селектором).

Спасибо.

Answer 1

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

Answer 2

Вы можете использовать этот фрагмент кода для работы:

$controls = $(document).find('.control'); 
 
console.log($controls.filter(function(){ 
 
\t return $(this).css('display') == 'block' && $(this).attr('required') == 'required'; 
 
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="group" style="display:none"> 
 
    <div class="control" id="control1" required> 
 
     <input type="text" /> 
 
    </div> 
 
    <div class="control" id="control2" required> 
 
     <input type="text" /> 
 
    </div> 
 
    <div class="control" id="control3"> 
 
     <input type="text" /> 
 
    </div> 
 
</div>

Answer 3

Если бы вы могли разделить рабочую скрипку или даже фрагмент кода я мог бы помочь вам лучше. Но я все еще стараюсь ответить на ваш вопрос.

Во-первых, так как ваш родитель скрыт ваш ребенок будет скрыт, а также (нормальное поведение)

Во-вторых, просто попробуйте сделать это

var elem = $(element), 
controlElem = elem.find(".control"), 
if(controlElem.hasClass("required")){ 
success code goes here. 

Dont Также забудьте изменить селектор ('[ required = required] ')

Надеюсь, это поможет.