Создать элемент div в цикле в jquery

0

Я пытаюсь создать несколько элементов div в JQuery. Я пробовал решения ниже.

создать html с jquery
Создание элемента div в jQuery

Мне нужно создать ниже элемент html в jquery

<div class="r-c-grid ">
    <div class="r-c-imgmask">
        <img src="http://example.com/images/path.jpg">
    </div>
    <div class="r-c-gradient"></div>
    <h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3>
</div>

Я могу сделать это с помощью вышеупомянутых решений, но это сложнее. Может кто-нибудь подскажет мне, есть ли лучший способ сделать это в последнем jquery.

  • 1
    Покажите код, который у вас уже есть, чтобы мы могли предложить способы его улучшения, а не начинать с нуля.
  • 0
    Просто оберните HTML-код в $( ) ..
Показать ещё 2 комментария
Теги:

4 ответа

1
Лучший ответ

Вы можете добавить весь блок за один проход следующим образом:

$('body').append('\
    <div class="r-c-grid "> \
        <div class="r-c-imgmask"> \
            <img src="http://example.com/images/path.jpg"> \
        </div> \
        <div class="r-c-gradient"></div> \
        <h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3> \
    </div> \
');

Обратите внимание, что обратная косая черта необходима, чтобы разбивать такую строку на несколько строк, не вызывая синтаксических ошибок. Это эффективно комментирует разрывы строк.

  • 1
    Недавно я сделал то же самое, но это не сработало. Теперь я понял почему .. потому что я не считал завершающие пробелы в каждой строке после кода, чтобы добавить символ перехода, как вы сделали здесь: D. если после escape-символа есть пробел, то все портится.
2
var  str='<div class="r-c-grid ">'
        +'<div class="r-c-imgmask">'
         +'   <img src="http://example.com/images/path.jpg">'
        +'</div>'
        +'<div class="r-c-gradient"></div>'
        +'<h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3>'
    +'</div>';

$(str).appendTo(yourselector);

или можете попробовать

$(yourselector).append(str);

СМОТРЕТЬ ДЕМО

ссылка append() и appendTo()

  • 0
    На самом деле мне нравится это решение ...
  • 0
    Да правильно извините :)
Показать ещё 4 комментария
0

Вы имеете в виду что-то полудинамичное?

function addDiv(parentId, img, link, text){
    var div = '<div class="r-c-grid "><div class="r-c-imgmask">'+
        '<img src="http://example.com/images/'+img+'">'+
        '</div><div class="r-c-gradient"></div>'+
        '<h3 class="r-c-grid-title">'+
        '<a href='+link+'>'+text+'</a></h3></div>';
    document.getElementById(parentId).innerHtml += div;
}
0

Просто попробуйте это,

$('body').append('<div class="r-c-grid ">
    <div class="r-c-imgmask">
        <img src="http://example.com/images/path.jpg">
    </div>
    <div class="r-c-gradient"></div>
    <h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3>
</div>');

Или попробуйте,

$rci=$('<div class="r-c-imgmask" />')
         .append('<img src="http://example.com/images/path.jpg">');
$rcg=$('<div class="r-c-gradient" />');
$h3=$('<h3 class="r-c-grid-title" />')
         .append('<a href="http://example.com/link.php">Post Title</a>');
$rc=$('<div class="r-c-grid " />').append($rci, $rcg, $h3);
$('body').append($rc);

Ещё вопросы

Сообщество Overcoder
Наверх
Меню