0

Есть группа элементов <p> каждый из которых содержит строку вида "название: значение". Надо каждый элемент разделить по сепаратору ":". Потом, допустим, создать элемент <dl> с <dt> внутри и поместить в него левое значение. Правое значение поместить в элемент <dd> этого же <dl>. И так для каждого <p> в наборе. А потом удалить все элементы <p> этого набора, но оставить созданные списки описаний.

<dl>
<dt>Термин 1</dt>
<dd>Описание термина 1</dd>
<dt>Термин 2</dt>
<dd>Описание термина 2</dd>
</dl>

Обертываю нужный набор <p>, методу each() передаю функцию, в которой текущий <p> split'ом распиливаю по ":". Но дальше ничего не выходит.

Как это можно реализовать?

1
  • 1
    Приведите пример того, как вы это делаете
    – user199604
    22 фев 2018 в 11:03

2 ответа 2

0

Здравствуйте, попробуйте продебажить следующий код:

<html>
<head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="set-p">
        <p>Термин 1: Описание термина 1</p>
        <p>Термин 2: Описание термина 2</p>
        <p>Термин 3: Описание термина 3</p>
    </div>
</body>
<script type="text/javascript">
$(document).ready(function() {
    debugger;
    var dl = '<dl>';
    $('#set-p p').each(function () {
        var val = $(this).text();
        if (val) {
            var arr = val.split(': ');
            if (arr.length >= 2) {
                dl += '<dt>' + arr[0] + '</dt>';
                dl += '<dd>' + arr[1] + '</dd>';
            }
        }
    });
    dl += '</dl>';
    $('#set-p').replaceWith(dl);
});
</script>
5
  • сначала вообще все <p> заменялись на один <dl>. Я добавила в $('#set-p p').replaceWith(dl). Он у меня <p> заменил <dl>, но они пустые.
    – HowAboutNo
    22 фев 2018 в 13:04
  • Прошу вас показать свой код, а именно: часть html, которая используется в js и сам js. Жду что-то подобное, что я вам прислал. 22 фев 2018 в 13:46
  • Вот разметка: <div class="container"> <p>Характеристики</p> <p>Производитель: УМК</p> <p>Диаметр: 115</p> <p>Толщина: 0,5мм</p> <p>Утепленный: нет</p> </div>
    – HowAboutNo
    22 фев 2018 в 14:03
  • Js тот же, за исключением имен переменных.
    – HowAboutNo
    22 фев 2018 в 14:08
  • Все-таки советую вам воспользоваться моим примером, при этом продебажить код. И разобраться как он работает. 23 фев 2018 в 16:19
0

Решила сделать следующим образом, все работает:

$(function() {

    var allValues = [];

    $('.description p').each(function() {
        var currentItem = $(this).text();

        if (currentItem) {
            var splitItem = currentItem.split(':');
            allValues.push(splitItem);
        }
        var dl = '<dl>';
        $(this).replaceWith(dl);
    });

    $('.description dl').each(function() {
        var currentStr = '<dt>' + allValues[0][0] + '</dt>' + '<dd>' + allValues[0][1] + '</dd>';
        $(this).html(currentStr);
        allValues.shift(0);
    });
});
3
  • В вашем коде два each, мой содержит только один. 27 фев 2018 в 8:52
  • @mursalov-oleg Ваш не работает, а мой работает. Можно и оптимизировать.
    – HowAboutNo
    27 фев 2018 в 14:43
  • Прошу Вас показать, как Вы проверили, что мой код не работает? 27 фев 2018 в 15:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.