клонировать div с помощью jquery и показывать как код

Мне нужно показать код некоторых Div на странице. Div должен быть клонирован в тег pre с правильным интервалом и идентификацией и должен работать в ie8.

Я новичок, поэтому не знаю, правильно ли я это делаю, пока я написал это

HTML

//create button after div
    $("<div class='btn'>click to show code</div>").insertAfter(".content-wrapper");

    //create pre wrapper after button
    $("<pre></pre>").insertAfter(".btn");

    //hide the pre so can slidetoggle later
    $("pre").hide();
    
    $(".btn").one("click", function() {
    
      var cloned = $(this).prev().clone();
      var code = $(cloned).html().replace(/</g, "&lt;").replace(/>/g, "&gt;");
      $(this).next().append(code);
    
    });
    
    $(".btn").click(function() {
      $(this).next().slideToggle("fast", function() {
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper-all">
            <div class="content-wrapper">
                <div class="example-div">
                    <span>lorem ipsum first</span>
                </div>
            </div>
        </div>

        <div class="wrapper-all">
            <div class="content-wrapper">
                <div class="example-div">
                    <span>lorem ipsum second</span>
                </div>
            </div>
        </div>

jsfiddle

Он динамически добавляет, button и pre после разделов .content-wrapper, которые можно переключать слайдами.

ie8 полностью игнорирует пробелы, а в chrome, firefox появляются некоторые нежелательные пробелы, выводимый код должен учитывать идентификацию исходных div, но удалять пробелы слева, и код должен начинаться с нулевого пробела слева.


javascript html jquery clone pre
person Sevan D.    schedule 12.12.2014    source источник
comment
возможный дубликат Как сохранить пробельный отступ текста, заключенного в HTML-теги ‹pre›, за исключением текущего уровня отступа тега ‹pre› в документе?   -  person showdev    schedule 12.12.2014
comment
Спасибо ! это именно то, что я искал, как я могу реализовать это в своем существующем коде?   -  person Sevan D.    schedule 13.12.2014

Ответы (1)


arrow_upward
0
arrow_downward

У меня был некоторый успех со следующим методом, свободно основанным на другие ответы здесь. Это кажется немного «грубой силой» и может быть хрупким в зависимости от того, насколько хорошо отформатирован ваш HTML.

По сути, он разбивает строки содержимого HTML на массив. Он определяет количество пробелов в начале первой строки и удаляет это количество пробелов из всех строк. Это сбрасывает отступ, так что первая строка не имеет отступа, а последующие строки имеют отступ только относительно первой строки.

Так, если первая строка имеет отступ 15 пробелов, а вторая строка — 20 пробелов, то первая строка не будет иметь отступ, а вторая строка будет иметь отступ 5 пробелов (20-15).

$(".btn").one("click", function () {

    var cloned = $(this).prev('.content-wrapper').clone(),

        // Get the code from the clone and split it by new lines.
        // Then filter the array to remove blank lines.
        code = $(cloned).html().split("\n").filter(function (n) {
            return (n.replace(/\s+$/, '') != '');
        }),

        // Determine the number of spaces on the left of the first line
        spacesOnLeft = code[0].match(/^ */)[0].length;

    // loop through each line, removing unnecessary indentation spaces.
    // Append the line to the output area
    for (i in code) {
        var $output = $(this).next(),
            existing_text=$output.text(),
            new_text=code[i].substring(spacesOnLeft);
        $output.text(existing_text + new_text + '\n');
    }

});

Тест ниже:

//create button after div
$("<div class='btn'>show code</div>").insertAfter(".content-wrapper");
//create pre wrapper after button
$("<pre></pre>").insertAfter(".btn");
//hide the pre so can slidetoggle later
$("pre").hide();

$(".btn").one("click", function() {

  var cloned = $(this).prev('.content-wrapper').clone(),
    code = $(cloned).html().split("\n").filter(function(n) {
      return (n.replace(/\s+$/, '') != '');
    }),
    spacesOnLeft = code[0].match(/^ */)[0].length;

  for (i in code) {
      var $output = $(this).next(),
          existing_text=$output.text(),
          new_text=code[i].substring(spacesOnLeft);
      $output.text(existing_text + new_text + '\n');
  }

});

$(".btn").click(function() {
  $(this).next().slideToggle("fast", function() {});
});
.wrapper-all {
  margin-bottom: 40px;
}
.example-div {
  padding: 40px;
  background-color: #ecf0f1;
  text-align: center;
}
.btn {
  padding: 8px 20px;
  background-color: #1abc9c;
  color: white;
  width: auto;
  cursor: pointer;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.16s ease-in-out;
}
.btn:hover {
  background-color: #16a085;
}
pre {
  background-color: #34495e;
  color: white;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper-all">
    <div class="content-wrapper">
        <div class="example-div">
            <span>lorem ipsum first</span>
        </div>
    </div>
</div>
<div class="wrapper-all">
    <div class="content-wrapper">
        <div class="example-div">
            <span>lorem ipsum second</span>
        </div>
    </div>
</div>

person showdev    schedule 12.12.2014
comment
спасибо, это здорово, отлично работает в firefox и chrome, но не может работать в ie8, выдает ошибку Object не поддерживает это свойство или метод Line ... который является этим кодом в этой строке для (i в коде) { - person Sevan D.; 13.12.2014
comment
Я не совсем уверен, но я прочитал здесь и там, что IE8 не поддерживает в синтаксисе. Не уверен, что это точно. Но в любом случае вы можете сделать то же самое с чем-то вроде for (var i = 0, len = code.length; i < len; i++) { или с помощью jQuery each(). Посмотрите, поможет ли это. - person showdev; 13.12.2014
comment
Удачи с этим? Меня интересует IE8. - person showdev; 13.12.2014
comment
я только что попробовал for (var i = 0, len = code.length; i ‹ len; i++) { но мне не повезло, я новичок в js, можете ли вы помочь мне преобразовать его в jquery each() ? возможно, версия jquery может работать. Спасибо ! - person Sevan D.; 13.12.2014
comment
Вот пример использования цикла for. Вот пример использования jQuery each(). - person showdev; 15.12.2014
comment
Спасибо, все еще выдает ошибку в ie8, но без проблем, работает на мобильных и настольных Firefox, Chrome. Я могу отказаться от поддержки ie8, это было для документации моего проекта. Еще раз спасибо все отлично работает! - person Sevan D.; 18.12.2014