Как мне обернуть теги внутри для l oop, используя jquery Ajax с json данными? - PullRequest
Новая
       1

Как мне обернуть теги внутри для l oop, используя jquery Ajax с json данными?

0 голосов
/ 26 марта 2020

Я практикую Ajax, используя jQuery.

Теперь я собираюсь выяснить, как выводить json данные с jQuery для-l oop. Как я могу вывести теги и даже обернуть теги внутри тегов for-l oop?

HTML так: 

<main>
  <h1>Ajax</h1>
  <div id="output">
    <h2>Title</h2>
    <h2>Title</h2>
    <div class="block"></div>
    <div class="wrap">
      <div class="card"></div>
      <h3>Card Title</h3>
      <p><img src="https://picsum.photos/200/100" alt="Alt"></p>
      <p>Text</p>
      <h3>Card Title</h3>
      <p><img src="https://picsum.photos/200/100" alt="Alt"></p>
      <p>Text</p>
      <h3>Card Title</h3>
      <p><img src="https://picsum.photos/200/100" alt="Alt"></p>
      <p>Text</p>
    </div>
    <div class="block"></div>
    <div class="wrap">
      <div class="card"></div>
      <h3>Card Title</h3>
      <p><img src="https://picsum.photos/200/100" alt="Alt"></p>
      <p>Text</p>
      <h3>Card Title</h3>
      <p><img src="https://picsum.photos/200/100" alt="Alt"></p>
      <p>Text</p>
      <h3>Card Title</h3>
      <p><img src="https://picsum.photos/200/100" alt="Alt"></p>
      <p>Text</p>
    </div>
  </div><!-- /#output -->
</main>

Но я бы хотел обернуть block, card теги div, содержащие в них теги h3 .et c. В идеале я хочу, чтобы html было таким: 

<main>
  <h1>Ajax</h1>
  <div id="output">
    <div class="block">
      <h2>Title</h2>
      <div class="wrap">
        <div class="card">
          <h3>Card Title</h3>
          <p><img src="https://picsum.photos/200/100" alt="Alt"></p>
          <p>Text</p>
        </div>
        <div class="card">
          <h3>Card Title</h3>
          <p><img src="https://picsum.photos/200/100" alt="Alt"></p>
          <p>Text</p>
        </div>
        <div class="card">
          <h3>Card Title</h3>
          <p><img src="https://picsum.photos/200/100" alt="Alt"></p>
          <p>Text</p>
        </div>
      </div>
    </div>
    <div class="block">
      <h2>Title</h2>
      <div class="wrap">
        <div class="card">
          <h3>Card Title</h3>
          <p><img src="https://picsum.photos/200/100" alt="Alt"></p>
          <p>Text</p>
        </div>
        <div class="card">
          <h3>Card Title</h3>
          <p><img src="https://picsum.photos/200/100" alt="Alt"></p>
          <p>Text</p>
        </div>
        <div class="card">
          <h3>Card Title</h3>
          <p><img src="https://picsum.photos/200/100" alt="Alt"></p>
          <p>Text</p>
        </div>
      </div>
    </div>
  </div><!-- /#output -->
</main>

Пожалуйста, помогите. Заранее спасибо. 

// $.getJSON("data.json", function(data) {
var data = [{
    "title": "Title",
    "content": [
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" }
    ]
},
{
    "title": "Title",
    "content": [
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" }
    ]
}];

for (var i in data) {
  const output = $('#output');
  const block = $('<div class="block"></div>');
  const wrap = $('<div class="wrap"></div>');
  const card = $(wrap).append('<div class="card"></div>');

  $(output).append(block).prepend('<h2>' + data[i].title + '</h2>').append(wrap);

  for (var j in data[i].content) {
    $(card).append('<h3>' + data[i].content[j].card + '</h3>')
      .append('<p><img src="' + data[i].content[j].img + '" alt="' + data[i].content[j].alt + '">' + '</p>')
      .append('<p>' + data[i].content[j].text + '</p>');
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#output {
  text-align: center;
}

.block {
  margin: 50px auto;
}

.wrap {
  padding: 20px;
  display: flex;
  justify-content: space-around;
  background-color: #f8f8f8;
}

.card {
  padding: 30px 20px;
  background-color: lavenderblush;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <h1>Ajax</h1>
  <div id="output">
  </div>
</main>

Ответы [ 2 ]

1 голос
/ 26 марта 2020

Вы можете просто изменить $ (карточку) на $ (блок) в конце скрипта 

// $.getJSON("data.json", function(data) {
var data = [{
    "title": "Title",
    "content": [
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" }
    ]
},
{
    "title": "Title",
    "content": [
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" }
    ]
}];

for (var i in data) {
  const output = $('#output')
  , block = $('<div class="block"></div>')
  , wrap = $('<div class="wrap"></div>')
  , card = $('<div class="card"></div>');

  for (var j in data[i].content) {
    $(block).append('<h3>' + data[i].content[j].card + '</h3>')
      .append('<p><img src="' + data[i].content[j].img + '" alt="' + data[i].content[j].alt + '">' + '</p>')
      .append('<p>' + data[i].content[j].text + '</p>');
  }
      
  wrap.append(card);
  block.append('<h2>' + data[i].title + '</h2>');
  block.append(wrap);  
  output.append(block);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#output {
  text-align: center;
}

.block {
  margin: 50px auto;
}

.wrap {
  padding: 20px;
  display: flex;
  justify-content: space-around;
  background-color: #f8f8f8;
}

.card {
  padding: 30px 20px;
  background-color: lavenderblush;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <h1>Ajax</h1>
  <div id="output">
  </div>
</main>
1 голос
/ 26 марта 2020

Просто некоторые проблемы с вашим порядком добавления. Проверьте исправления: 

// $.getJSON("data.json", function(data) {
var data = [{
    "title": "Title",
    "content": [
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" }
    ]
},
{
    "title": "Title",
    "content": [
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
        { "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" }
    ]
}];

for (var i in data) {
  const output = $('#output')
  , block = $('<div class="block"></div>')
  , wrap = $('<div class="wrap"></div>')
  

  for (var j in data[i].content) {
    const card = $('<div class="card"></div>');
      card
      .append('<h3>' + data[i].content[j].card + '</h3>')
      .append('<p><img src="' + data[i].content[j].img + '" alt="' + data[i].content[j].alt + '">' + '</p>')
      .append('<p>' + data[i].content[j].text + '</p>');
      wrap.append(card);
  }
      
  
  block.append('<h2>' + data[i].title + '</h2>');
  block.append(wrap);  
  output.append(block);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#output {
  text-align: center;
}

.block {
  margin: 50px auto;
}

.wrap {
  padding: 20px;
  display: flex;
  justify-content: space-around;
  background-color: #f8f8f8;
}

.card {
  padding: 30px 20px;
  background-color: lavenderblush;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <h1>Ajax</h1>
  <div id="output">
  </div>
</main>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...