Не удается вложить divs elemnets используя JQUERY

Question

В помеченном коде есть вложенные элементы div, я прочитал файл XML, в котором есть новостные статьи. Я хочу прочитать и добавить их в этот вложенный формат, используя jquery.

<div id="for-you-feed" class="container" style="justify-content: center;">

  <div class="row view-group " id="rowview">

    **
        <div class="item grid-group-item col-xs-4 col-lg-4 col-md-6 col-sm-12">
            <div class=" thumbnail card border-light" style="width: 20rem; ">
                <div class="img-event ">
                    <img class="group list-group-image img-fluid " src="https://timesofindia.indiatimes.com/photo/74745223.cms " alt=" " />
                </div>
                <div class="caption card-body ">
                    <h4 class="group card-title inner list-group-item-heading ">
                        Hyderabad: Buses with same number plates seized</h4>
                    <p class="group inner list-group-item-text ">
                        The transport authorities, under the guidance of deputy transport commissioner Papa Rao, seized four buses that belo</p>
                    <div class="row ">
                        <div id="footer1" class="col-xs-12 col-md-6 ">
                            <p class="lead ">
                                $21.000</p>
                        </div>
                        <div id="footer2" class="col-xs-12 col-md-6 ">
                            <a class="btn btn-success " href="http://www.jquery2dotnet.com ">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    **
</div>

Мой код jquery ниже

$(document).ready(function() {
  $.get("https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Ftimesofindia.indiatimes.com%2Frssfeeds%2F-2128816011.cms&api_key=mkzfaqsb5gtninv1pddoke81vwmjlyfiissiitvd", function(data, status) {
    //$("#rowview").empty();
    for (i in data.items) {
        console.log(data.items[i].thumbnail);
        console.log(data.items[i].title);
        console.log(data.items[i].link);
        console.log(data.items[i].description);

        console.log(data.items[i].description.slice(pos + 4));
        var pos = data.items[i].description.indexOf("</a>"),
            $divitem = $("</div>").attr('class', 'item grid-group-item col-xs-4 col-lg-4 col-md-6 col-sm-12');

        var $divthumb = $("</div>").attr({ "class": 'thumbnail card border-light', style: 'width: 20rem' }),
            $divimg = $("</div>").attr('class', 'img-event  '),
            $imggrp = $("</img>").attr({ "class": 'group list-group-image img-fluid ', src: data.items[i].thumbnail }),
            $divcaption = $("</div>").attr('class', 'caption card-body'),
            $headcard = $("</h4>").text(data.items[i].title).attr('class', 'group card-title inner list-group-item-heading'),
            $paracard = $("</p>").attr('class', 'group inner list-group-item-text').text(data.items[i].description.slice(pos + 4)),
            $divrow = $("</div>").attr('class', 'row'),
            $divfooter1 = $("</div>").attr({ "class": 'col-xs-12 col-md-6', id: 'footer1' }),
            $lead = $("</p>").attr('class', 'lead').text('$21.000'),

            $divfooter2 = $("</div>").attr({ "class": 'col-xs-12 col-md-6', id: 'footer2' }),
            $atag = $("</a>").attr({ class: 'btn btn-success', href: 'http://www.jquery2dotnet.com' }).text("Add to cart");



        $("#rowview").append($divitem.append($divthumb.append([$divimg.append($imggrp), $divcaption.append([$headcard, $paracard, $divrow.append([$divfooter1.append($lead), $divfooter2.append($atag)])])])));

        // $($divthumb).append([$divimg, $divcaption]);
        //$($divimg).append($imggrp);
        // $(divthumb).append(divcaption);
        //$($divcaption).append([$headcard, $paracard, $divrow]);
        // $(divcaption).append(paracard);
        //$(divcaption).append(divrow);
        //$($divrow).append([$divfooter1, $divfooter2]);
        //$($divfooter1).append($lead);
        //$(divrow).append(divfooter2);
        // $($divfooter2).append($atag);

        // $(".view-group").append($divitem);


    }
  });
});

Я не получаю ответ на мой веб-сайт. Я даже попробовал код в комментариях, но не сработал.

Answer 1

Обновите код, и он работает. Надеюсь, это поможет.

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sidebar demo</title>
  <script
  src="https://code.jquery.com/jquery-3.5.0.min.js"
  integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
  crossorigin="anonymous"></script>
</head>
<body>
	<div id="rowview"> </div>
	
	<script>
	
		$(document).ready(function() {
		  $.get("https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Ftimesofindia.indiatimes.com%2Frssfeeds%2F-2128816011.cms&api_key=mkzfaqsb5gtninv1pddoke81vwmjlyfiissiitvd", function(data, status) {
			for (i in data.items) {
				console.log(data.items[i].thumbnail);
				console.log(data.items[i].title);
				console.log(data.items[i].link);
				console.log(data.items[i].description);
				console.log(data.items[i].description.slice(pos + 4));
				var pos = data.items[i].description.indexOf("</a>"),
					$divitem = $("<div>").attr('class', 'item grid-group-item col-xs-4 col-lg-4 col-md-6 col-sm-12');

				var $divthumb = $("<div>").attr({ "class": 'thumbnail card border-light', style: 'width: 20rem' }),
					$divimg = $("<div>").attr('class', 'img-event  '),
					$imggrp = $("<img>").attr({ "class": 'group list-group-image img-fluid ', src: data.items[i].thumbnail }),
					$divcaption = $("<div>").attr('class', 'caption card-body'),
					$headcard = $("<h4>").text(data.items[i].title).attr('class', 'group card-title inner list-group-item-heading'),
					$paracard = $("<p>").attr('class', 'group inner list-group-item-text').text(data.items[i].description.slice(pos + 4)),
					$divrow = $("<div>").attr('class', 'row'),
					$divfooter1 = $("<div>").attr({ "class": 'col-xs-12 col-md-6', id: 'footer1' }),
					$lead = $("<p>").attr('class', 'lead').text('$21.000'),

					$divfooter2 = $("<div>").attr({ "class": 'col-xs-12 col-md-6', id: 'footer2' }),
					$atag = $("<a>").attr({ class: 'btn btn-success', href: 'http://www.jquery2dotnet.com' }).text("Add to cart");



				$("#rowview").append($divitem.append($divthumb.append([$divimg.append($imggrp), $divcaption.append([$headcard, $paracard, $divrow.append([$divfooter1.append($lead), $divfooter2.append($atag)])])])));

				// $($divthumb).append([$divimg, $divcaption]);
				//$($divimg).append($imggrp);
				// $(divthumb).append(divcaption);
				//$($divcaption).append([$headcard, $paracard, $divrow]);
				// $(divcaption).append(paracard);
				//$(divcaption).append(divrow);
				//$($divrow).append([$divfooter1, $divfooter2]);
				//$($divfooter1).append($lead);
				//$(divrow).append(divfooter2);
				// $($divfooter2).append($atag);

				// $(".view-group").append($divitem);


			}
		  });
		});
	
	</script>
	
	
</body>
</html>