Как получить дочерние элементы из jQuery?

Question

У меня есть HTML-код, определенный как это:

<div class="modal fade" id="my_0" role="dialog"> 
    <!-- Rest removed for brevity --> 
</div> 

Дело в том, что у меня есть много это в моем HTML, и когда я нажимаю один из них, изменения активного своих класса modal fade в modal fade in. Вот где я хочу найти некоторых детей из активного модального элемента. Я попробовал оба подхода ниже, но оба они возвращаются не определены.

$(function() { 
    $("#SubmitBtn").click(function() { 
     var location = $('.modal fade in').find("#location"); 
     var info = $('.modal fade in').children("#additional"); 

     alert("loc is: " + location.val()); 
     alert("info is: " + info.val()); 
    }); 
}); 

Любые идеи?

Answer 1

В jquery вы выбираете элементы так же, как и в css. Поэтому вместо $('.modal fade in) это должно быть $('.modal.fade.in'). Создание его:

Codepen Example

$(function() { 
    $("#SubmitBtn").click(function() { 
     var location = $('.modal.fade').find("#location"); 
     var info = $('.modal.fade').children("#additional"); 

     alert("loc is: " + location.val()); 
     alert("info is: " + info.val()); 
    }); 
}); 

Еще одно замечание - Вы используете селекторы идентификаторов при поиске детей. Если используется идентификатор, должен быть только один элемент с этим идентификатором. В противном случае вы должны использовать классы. Если вы используете идентификатор и имеете только один (как и должны), вы можете просто выбрать его как $('#additional'), а не искать его в другом элементе.