JavaScript - Как вставить HTML-коды в середине содержимого

0

Я хочу найти среднюю точку содержимого и вставить блок кодов HTML после тега <br> или тега </p> чтобы предложение не разделилось.

Я могу найти среднюю точку содержания, но я не знаю, как найти ближайший <br> тег или </p> тег и вставьте HTML - код.

Вот код, который у меня есть. JS Fiddle (http://jsfiddle.net/sunflowersh/BHHFZ/)

JQuery

$(document).ready(function(){
var content = $(".content");

var contentLength = $('.content').text().length;

var midLength = parseInt(contentLength / 2);

midLength.closest("<br>, </p>, <br/>").append("Ad Codes Come Here");

});
  • 1
    closest() не то, что вы хотите. Он просматривает дерево DOM, пытаясь найти родителя, соответствующего данному селектору.
Теги:

4 ответа

3
Лучший ответ

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

var content = $('.content').find('p, br');
var midLength = parseInt(content.length/2);
content.eq(midLength).after("Ad Codes Come Here");

скрипка здесь: http://jsfiddle.net/filever10/BHHFZ/20/

Поделиться
  • 0
    Это именно то, что я искал. Спасибо за чистый код.
  • 0
    Здорово, рад, что смог помочь! Это должно быть рекурсивными, и вы можете добавить что - нибудь еще , что нужно было бы так же, как и pre или blockquotes , в зависимости от curcumstances.
Показать ещё 1 комментарий
2

Что - то, как это будет работать, если вы можете изменить исходный код, чтобы использовать <p> метки для каждого пункта вместо иногда используя <br>:

content.children().each(function(){
    var $this = $(this);

    contLength += $this.text().length;

    if(contLength >= midLength){
         $this.after("<div class='added'>EXTRA STUFF ADDED HERE</div>");   
         return false;
    }
});

http://jsfiddle.net/BHHFZ/13/

Поделиться
  • 1
    Спасибо за решение. Так как мы не можем контролировать тег, чтобы он был всем </ p>, хотя мне нравится это решение, мы не можем его использовать. Вы проголосовали 1 за отличное решение. Спасибо!!
1

если вы не против взлома текста в параграфы, вы можете сделать это:

$(document).ready(function(){
    var content = $(".content");
    insertAt = content.children('p') === 0 ? 0 : Math.ceil(content.children('p').length / 2);
    content.children('p').eq(insertAt).before("<p style='color: red'>mid-point</p>");
});

Демо: http://jsfiddle.net/HHeLw/2/

Поделиться
  • 1
    Если мы можем контролировать теги в контенте, это идеальное решение. К сожалению, мы не можем контролировать теги в контенте. Спасибо за решение. проголосовал 1.
1

Подставляя содержимое на две части:

Первый - от 0 до середины. Второй - от среднего до последнего

Затем найдите первую позицию тега <br> во второй строке. Если этого достаточно, тогда все готово.

Иначе, если вы хотите, чтобы найти ближайший <br> с обеих сторон, а затем поиск, а также для позиции <br> в первой строке, но на этот раз последний и не первый. Сравните расстояние между 0 и <br> во второй части/и длину строки с позицией <br> в первой части. Чем меньше значение, тем ближе, а затем добавьте все, что хотите, в позицию длины br (+it, если вы хотите вставить свой элемент после нее)

Поделиться
  • 0
    Оберните код в ваших ответах в `` метки, чтобы он отображался правильно. Частичные HTML-теги.
  • 0
    Да спасибо :) я этого не заметил: D

Ещё вопросы

Сообщество Overcoder
Наверх
Меню