Nano Hash - криптовалюты, майнинг, программирование

добавление тегов переноса в текст до и после определенного тега с помощью jquery

Я пытаюсь создать структуру подробностей и сводных тегов для повторяющихся блоков html, которые включают абзацы и теги разрыва.

У моих div есть определенный класс, и я хочу использовать jquery для поиска контента. В частности, первый тег разрыва каждого абзаца, назначенного моему классу css, будет использоваться в качестве маркера, при этом все до первого разрыва будет обернуто тегами <summary></summary>, а все внутри всего соответствующего абзаца будет внутри обернуто парой тегов.

Итак, чтобы привести пример html до и после. До замены это выглядело так...

<p class="matchingClass">
this should be in a summary<br>this would be within the expandable details tag
</p>

И должно получиться так...

<p class="matchingClass"><details><summary>
this should be in a summary</summary><br>this would be within the expandable details tag
</details></p>

Я думал, что у меня это работает со следующим кодом....

$(".matchingClass").each(function() {
     $(this).prepend("<details><summary>");
     $(this).find("br").first().before().prepend("</summary>");
     $(this).append("</details>");  
});

НО теперь я понимаю, что jquery/javascript всегда автоматически вставляет закрывающие теги. Итак, как только первая из трех команд, которые я применяю, запускается, html не заканчивается так, как я ожидал.

Может кто-нибудь помочь?

jquery dom
16.09.2013

Ответы:


1

ДЕМО: http://jsfiddle.net/RJktH/

$('.matchingClass').each(function () {
    var t = $(this).html();
    $(this).html('<summary>' + t.replace('<br>', '</summary>'));
});

$('.matchingClass').wrapInner('<details/>');
16.09.2013

2

Вы можете использовать это:

$('.matchingClass').each(function(){
    $(this).contents().first().wrap('<summary>');
    $(this).contents().wrapAll('<details>');
});

Скрипт: http://jsfiddle.net/kkDFe/

16.09.2013
  • Должно быть details (множественное число), а не detail 16.09.2013
  • Кроме того, это не будет работать должным образом, если перед первым <br/>... есть какая-либо другая разметка. 16.09.2013
  • Это правда, но от исходного кода ОП у него нет другой разметки, поэтому для него может работать статическое решение. 16.09.2013

    • 3

    Самым простым решением может быть простой разбор строки:

    $('.matchingClass').each(function() {
    var html = $(this).html();
    var parts = html.split('<br>');
    var firstPart = parts.splice(0,1); // support multiple <br> elements
    html = '<details><summary>' + firstPart + '</summary><br>' + parts.join('<br>') + '</details>';
    $(this).html(html);
});

    Конечно, идеальным решением было бы изменение кода на стороне сервера для создания нужной вам разметки без необходимости возиться с ней с помощью javascript.

    16.09.2013
  • Спасибо Джейсон. Также отличная демонстрация... gvee немного более минималистична, но идея та же. Спасибо большое 16.09.2013

    • 4

    В любом случае некрасиво, но работает:

    var $p = $('.matchingClass')
var $details = $('<details />')

$p.contents().filter(function() {
    return this.nodeType == 3; // textNode
}).each(function(i, node) {
    i == 0 ? 
        $('<summary />', { text: node.nodeValue }).appendTo($details) :
        $details.append(node.nodeValue)
});

$p.empty().append($details);

    Пример скрипта

    16.09.2013
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..