JQuery найти и вставить (JQuery заменить) - PullRequest
2 голосов
/ 21 ноября 2011
<div class="twtr-tweet-text">
    <p>lorem ipsum <em>date 19th nov</em></p>
</div>
<div class="twtr-tweet-text">
    <p>lorem ipsum <em>date 18th nov</em></p>
</div>
<div class="twtr-tweet-text">
    <p>lorem ipsum <em>date 17th nov</em></p>
</div>

Как я могу преобразовать этот блок в код ниже.Помните, что несколько блоков содержат одинаковые имена классов и т. Д.

<div class="twtr-tweet-text">
    <p><img src="speech_left.jpg" />lorem ipsum <img src="speech_right.jpg" /><em>date 19th nov</em></p>
</div>

То есть до начального тега <em> и сразу после тега <p> после класса .twtr-tweet-text{}.

Ответы [ 2 ]

5 голосов
/ 21 ноября 2011
$('.twtr-tweet-text p').prepend('<img src="speech_left.jpg" />');
$('.twtr-tweet-text em').before('<img src="speech_right.jpg" />');
2 голосов
/ 21 ноября 2011

Вы можете использовать, кроме ответ Скотта :

$('<img src="speech_left.jpg" />').prependTo($('.twtr-tweet-text p'));

Отредактировано для добавления простого JavaScript-метода достижения того же:

var elems = document.getElementsByTagName('p'),
    leftImageSrc = 'speech_left.jpg',
    rightImageSrc = 'speech_right.jpg',
    className = 'twtr-tweet-text',
    parent, // used in the loop, below
    img; // used in the loop, below

for (i=0;i<elems.length;i++){
    parent = elems[i].parentNode; // looking at two qualities of the parent,
                                  // so storing it in a variable
    if (parent.tagName.toLowerCase() == 'div' && parent.className == className){
    // the 'if' tests that the parent is a div, and
    // that the parent has a class-name of 'twtr-tweet-text'
        // left image:
        lImg = document.createElement('img');
        lImg.src = leftImageSrc;
        // the firstChild of the elems[i] element is the textNode
        elems[i].insertBefore(lImg,elems[i].firstChild);

        // right image:
        rImg = document.createElement('img');
        rImg.src = rightImageSrc;
        elems[i].appendChild(rImg);
    }
}

JS Fiddle demo .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...