jQuery - изменить дочерний iframe, а не всю страницу?

Question

Я пытаюсь получить дочерний iframe и установить его источник в моем div под названием "myLittleModal"

function createModalElement( modalClassName ) {
return $('body').append("<div class=\""+ modalClassName + "\"><iframe></iframe></div>");
}


var modalElement = createModalElement( "myLittleModal" );
//alert(modalElement.text());           
modalElement.find('iframe').attr('src', "modal.html");

Но это фактически меняет источник не только iframe, но и другого iframe, который вообще не является потомком этого перикулярного элемента.??? ЗАЧЕМ!?

Я думал, что modalElement будет дескриптором конкретного элемента, который я создал, с помощью которого я мог бы манипулировать его конкретным дочерним iframe (не нужен класс, так как это дочерний элемент класса, который я могу стилизовать).

Просматривая консоль с исходным кодом в Chrome, я вижу, что она также меняет источник другого iframe на странице, которая сейчас используется для тестирования, загружая живую страницу. ЗАЧЕМ???

Это также происходит, если я использую функцию children("iframe").

Пожалуйста помоги

Answer 1

Попробуйте заменить ваш createModalElement функция со следующим:

function createModalElement( modalClassName ) {
    $('body').append("<div class=\""+ modalClassName + "\"></div>");
    return $('.' + modalClassName).append("<iframe></iframe>");
}

То, что я сделал, было разделить действия добавления и только return2-й.

Ваш оригинал iframe (тот, который был там до вызова js), скорее всего, был обернут с помощью div, вызываемого этой новой функцией, потому что вы использовали append к body, В моем измененном коде я добавляю iframe к div он создан, поэтому, когда вы применяете атрибут, он будет применен только к этому. Опять же, я не уверен на 100%, что это ответ, но наверняка мой код работает.

Вот демоверсия, с которой вы можете возиться.