Question

我正在尝试使用带有jQuery的文本：

Example

我需要一个数组，并在每个x字的balise中添加图像。（x是随机数）。

使用jQuery可以轻松计算单词：

var count = $("#example1").text().replace(/ /g,'').length;

如何将图像随机添加到文本中？

Answer 1

你必须用新的html替换整个html（只有文本的那个），其中包括图像：

HTML：

<div>one two three</div>

JS：

var wordList = $("div").html().split(' ');
var newHtml = '';

$.each(wordList, function(index, word){
  newHtml += ' ' + word;
  if (index == 1) {
    newHtml += '<img src="http://www.newarkadvertiser.co.uk/weather/icons/white-cloud.gif" />'     
  }        
});
$('div').html(newHtml)

示例jsfiddle

Answer 2

样本：

http://jsbin.com/ajowib/2/ - 循环图像数组，序列3，偏移2

http://jsbin.com/ajowib/ - 不循环，序列5，偏移3

HTML：

<div id="myText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

JavaScript的：

jQuery(function($) {
    var images = ["img1.png", "img2.png", "img3.png"], // Array to contains image url's
        sequence = 5, // The sequence of witch the images is inserted
        sequenceOffset = 3, // The offset from the start
        loopImages = true, // If you want to loop throw your image array again and again            

        text = $("#myText").html().split(" "),
        newText = [],
        i = 0, y = 0,
        len = text.length;

    for( ; i < len; i++ ) {
        if ( (i % sequence) === sequenceOffset ) {
            if ( loopImages || y < images.length ) {
                newText.push("<img src='" + images[y%images.length] + "'/>");
                y++;
            }
        }
        newText.push(text[i]);
    }

    $("#myText").html(newText.join(" "));
});

Answer 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnImage').on('click', function () {
                var imageText = ['one', 'two', 'three'];
                var imageArraySrc = ['http://www.newarkadvertiser.co.uk/weather/icons/white-cloud.gif', 'http://www.newarkadvertiser.co.uk/weather/icons/white-cloud.gif', 'http://www.newarkadvertiser.co.uk/weather/icons/white-cloud.gif'];
                var text = $('div#example1').text();

                $.each(imageText, function (i, value) {
                    text = text.replace(new RegExp(value, 'g'), value + ' <img src="' + imageArraySrc[i] + '" />');
                });

                $('div#example1').html(text);
            });
        });
    </script>
</head>
<body>
    <div id="example1">
        one there two are is an image in this text . one two three.
    </div>
    <input type="button" id="btnImage" value="Click Me!" />
</body>
</html>

使用jQuery在每x个单词后插入一个图像

3 个答案: