Jquery .append. После того, как отформатировать .each
Я пытаюсь добиться следующего:
<div class = "item">
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-3">IMG</div>
<div class = "col-md-9">TEXT</div>
</div>
</div>
</div>
<div class = "item">
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-3">IMG</div>
<div class = "col-md-9">TEXT</div>
</div>
</div>
</div>
Вот что у меня есть на данный момент:
var ws_ftr = data.ws_ftr.records;
console.info(JSON.stringify(ws_ftr));
jQuery.each(ws_ftr, function(index, ftr) {
jQuery('.carousel-inner').append('<div class = "item">');
jQuery('.item').append('<div class = "container-fluid">');
jQuery('.container-fluid').append('<div class = "row">');
jQuery('.row').append('<div class = "col-md-3"><img src = "img/features_sliding/'+ftr[3] +'" alt = "feature-'+ftr[2]+'"/></div><div class = "col-md-9"><h2>'+ftr[2]+'</h2>'+ftr[1]+'</div>');
Что дает мне это, я остановился на первой серьезной ошибке, потому что считаю, что другие будут исправлены, как только я ее исправлю ...
<div class = "item">
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-3">IMAGE</div>
<div class = "col-md-9">TEXT</div>
**<div class = "col-md-3">IMG</div>
<div class = "col-md-9">TEXT</div>**
Это не должно давать мне col-md-3 и col-md-9 для каждого цикла, а вместо этого должно давать мне весь блок item.
Я новичок в jQuery / javascript и учусь по ходу дела. Может ли кто-нибудь объяснить мне, что я сделал не так, и как это исправить? Огромное спасибо!
@Ele, не обязательно. Возможно, OP использует jQuery.noConflict
@Phiter хорошо, в таком случае отлично. :)
Я не понимаю, что вам нужно сделать, вы можете быть более конкретным? Одно предложение, которое я могу вам дать, - закрыть добавленные div, созданные с помощью jQuery.
сделать все добавить в одну строку и проверить - jQuery('.carousel-inner').append('<div class = "item"><div class = "container-fluid"><div class = "row"><div class = "col-md-3"><img src = "img/features_sliding/'+ftr[3] +'" alt = "feature-'+ftr[2]+'"/></div><div class = "col-md-9"><h2>'+ftr[2]+'</h2>'+ftr[1]+'</div></div></div></div>');
Я думаю, проблема в том, что когда вы используете селектор вроде jQuery('.row'), он выбирает ВСЕ элементы div с строкой класса. Поэтому, когда ваш цикл запускается во второй раз, он также добавляется к элементам, которые вы создали в первом цикле ... И это продолжается с каждой итерацией .each.
Я создаю виджет карусели ... Я предполагал, что div закроется после добавления. Это мой вопрос, я не уверен, как закрыть эти div ...
@ laural4705 вы пробовали мое решение, указанное в комментарии
Да!! Это сработало отлично! Большое спасибо!!
@ laural4705 рад вам помочь. Я тоже добавил это как решение.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Просто заметил, что в вашем jQuery вы никогда не закрывали ни один из своих div. Итак, продолжая свой код, его можно завершить так:
var ws_ftr = data.ws_ftr.records;
console.info(JSON.stringify(ws_ftr));
$.each(ws_ftr, function(index, ftr) {
$('.carousel-inner').append('<div class = "item">');
$('.item').append('<div class = "container-fluid">');
$('.container-fluid').append('<div class = "row">');
$('.row').append('<div class = "col-md-3"><img src = "img/features_sliding/'+ftr[3] +'" alt = "feature-'+ftr[2]+'"/></div><div class = "col-md-9"><h2>'+ftr[2]+'</h2>'+ftr[1]+'</div>');
$('.container-fluid').append('</div>');
$('.item').append('</div>');
$('.carousel-inner').append('</div>');
);
Я считаю, что это также можно сделать так:
var ws_ftr = data.ws_ftr.records;
console.info(JSON.stringify(ws_ftr));
$.each(ws_ftr, function(index, ftr) {
$('.carousel-inner').append('<div class = "item"></div>');
$('.item').append('<div class = "container-fluid"></div>');
$('.container-fluid').append('<div class = "row"></div>');
$('.row').append('<div class = "col-md-3"><img src = "img/features_sliding/'+ftr[3] +'" alt = "feature-'+ftr[2]+'"/></div><div class = "col-md-9"><h2>'+ftr[2]+'</h2>'+ftr[1]+'</div>');
);
1.Вместо нескольких .append() делайте все в одном .append()
2. Закройте все созданные вами div.
jQuery('.carousel-inner').append('<div class = "item"><div class = "container-fluid"><div class = "row"><div class = "col-md-3"><img src = "img/features_sliding/'+ftr[3] +'" alt = "feature-'+ftr[2]+'"/></div><div class = "col-md-9"><h2>'+ftr[2]+'</h2>'+ftr[1]+'</div></div></div></div>');
Примечание. Кажется, что проблему создают незамкнутые div.
jQuery, используйте вместо него сокращение$.