Форум

Иззет · #1 (**permalink**) 22.10.2015, 02:31

<div class="visible"></div>
<div class='content'>
      <h1>Заголовок1</h1>
      <p>Текст1</p>
      <a href='#'>ссылка1</a>
</div>
<div class='content'>
      <h1>Заголовок2</h1>
      <p>Текст2</p>
      <a href='#'>ссылка2</a>
</div>

Предположим, нужно взять содержимое дивов .content и выводить через див .visible содержимое случайного дива .content

var content_arr = [];
    $(".content").each(function() {
        var elem = $(this).html();
        content_arr.push(elem);
        $(this).text("");   
    }).hide();
    n = Math.round(Math.random()*(content_arr.length - 1));
    $('.visible').text(content_arr[n]).show();

В итоге текст в .visible выводится в виде строки вместе с тегами. Как реализовать так, чтобы в .visible нормально выводился html код?

рони · #2 (**permalink**) 22.10.2015, 02:46

Иззет,

~~text~~ -> html

Иззет · #3 (**permalink**) 22.10.2015, 02:52

Да, очень глупая ошибка, как это я не углядел) спасибо, что раскрыли глаза)

рони · #4 (**permalink**) 22.10.2015, 03:00

Иззет,
вариант...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .visible  {
    display: none;

  }

 </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
     var content_arr = [], n;
    $(".content").each(function() {
        content_arr.push(this.innerHTML);
    }).remove();
    n = Math.floor(Math.random()*content_arr.length);
    $('.visible').html(content_arr[n]).show();
});
  </script>
</head>

<body>
<div class="visible"></div>
<div class='content'>
      <h1>Заголовок1</h1>
      <p>Текст1</p>
      <a href='#'>ссылка1</a>
</div>
<div class='content'>
      <h1>Заголовок2</h1>
      <p>Текст2</p>
      <a href='#'>ссылка2</a>
</div>



</body>

</html>

Иззет · #5 (**permalink**) 22.10.2015, 10:29

Спасибо, вариант намного оптимальней моего.

рони · #6 (**permalink**) 22.10.2015, 11:43

Иззет,
ещё вариант

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .visible  {
    display: none;

  }

 </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function(){
     var content_arr = $.makeArray($(".content").remove()),
     n = Math.floor(Math.random()*content_arr.length);
    $('.visible').html(content_arr[n].innerHTML).show();
});
  </script>
</head>

<body>
<div class="visible"></div>
<div class='content'>
      <h1>Заголовок1</h1>
      <p>Текст1</p>
      <a href='#'>ссылка1</a>
</div>
<div class='content'>
      <h1>Заголовок2</h1>
      <p>Текст2</p>
      <a href='#'>ссылка2</a>
</div>



</body>

</html>

Иззет · #7 (**permalink**) 22.10.2015, 14:39

Спасибо за помощь. Не знал что всю мою писанину можно уместить в 3 строки)

Форум

Справочник

Discord чат

Курсы javascript