Stenli
25.06.2017, 11:13
Здравствуйте.
Я не могу понять что-то. Прошу помощи с этим:
В одно textarea я помещаю html-содержимое, далее по нажатию на кнопке скрипт должен проанализировать содержимое и каждому header добавить id, кроме того, в начало кода добавляется список с <a>, указывающий на тот или иной header.
Сейчас имею кое-что работающее, но не правильно:
1. Появляется лишний и пустой <a>
2. Внутрь header не вставляется id
3. Обрабатывает не только header, но и каждый тег, например <p>.
$(document).ready(function() {
var ToC = '<nav role="navigation" class="table-of-contents">' + '<h1>On this page:</h1>' + '<ul>';
var newLine, el, title;
$('#sendTo').on('click', function () {
var insertData = $('#insertArea').val();
$(insertData,':header').each(function () {
// if ( $(this) === 'h2' ) {
el = $(this);
title = el.text();
$('el').attr('id' + title);
newLine = '<li>' + '<a href="#' + title + '">' + title + '</a>' + '</li>';
ToC += newLine;
// }
});
ToC += '</ul>' + '</nav>' + insertData;
$('#pastArea').val(ToC);
});
});
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="insertForm" id="insertForm">
<div style="width:45%; float: left; margin: auto;">
<textarea name="insertArea" id="insertArea" cols="80" rows="40"></textarea>
</div>
</form>
<br>
<input type="button" name="sendTo" value="Send to" id="sendTo">
<form name="pastForm" id="pastForm">
<div style="width:45%; float: right; margin: auto;">
<textarea name="pastArea" id="pastArea" cols="80" rows="40"></textarea>
</div>
</form>
<br>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="cm.js"></script>
</body>
</html>
Было бы здорово, если б не только подсказали, как извлечь из insertData заголовки, но и направили, чтобы я почитал и понял, где не прав.
Спасибо.
Я не могу понять что-то. Прошу помощи с этим:
В одно textarea я помещаю html-содержимое, далее по нажатию на кнопке скрипт должен проанализировать содержимое и каждому header добавить id, кроме того, в начало кода добавляется список с <a>, указывающий на тот или иной header.
Сейчас имею кое-что работающее, но не правильно:
1. Появляется лишний и пустой <a>
2. Внутрь header не вставляется id
3. Обрабатывает не только header, но и каждый тег, например <p>.
$(document).ready(function() {
var ToC = '<nav role="navigation" class="table-of-contents">' + '<h1>On this page:</h1>' + '<ul>';
var newLine, el, title;
$('#sendTo').on('click', function () {
var insertData = $('#insertArea').val();
$(insertData,':header').each(function () {
// if ( $(this) === 'h2' ) {
el = $(this);
title = el.text();
$('el').attr('id' + title);
newLine = '<li>' + '<a href="#' + title + '">' + title + '</a>' + '</li>';
ToC += newLine;
// }
});
ToC += '</ul>' + '</nav>' + insertData;
$('#pastArea').val(ToC);
});
});
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="insertForm" id="insertForm">
<div style="width:45%; float: left; margin: auto;">
<textarea name="insertArea" id="insertArea" cols="80" rows="40"></textarea>
</div>
</form>
<br>
<input type="button" name="sendTo" value="Send to" id="sendTo">
<form name="pastForm" id="pastForm">
<div style="width:45%; float: right; margin: auto;">
<textarea name="pastArea" id="pastArea" cols="80" rows="40"></textarea>
</div>
</form>
<br>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="cm.js"></script>
</body>
</html>
Было бы здорово, если б не только подсказали, как извлечь из insertData заголовки, но и направили, чтобы я почитал и понял, где не прав.
Спасибо.