I am using .each() to push / inject html elements to dynamically create popover (for dictionary definitions). However I notice if the same word is repeated in a sentence the elements are not pushed after the first occurrence.
Here's my code:
(function($) {
$.fn.definitions = function(words) {
console.log("words: ", words); // returns words array
var count = 0;
var html;
// Iterate over a jQuery object, executing a function for each matched element.
return this.each(function() {
var _results = [];
var _term = words["term"]; //console.log(_term); //return each definition / word pair object in a single array
var _this = $(this); //console.log(_this); //$(this) returns a jQuery object that wraps the element (all jQuery functions)
if (_term.length > 1) {
$.each(_term, function(key, val) {
_results.push(
_this.html(function(index, htmlContent) {
if (
_this
.text()
.indexOf(val["word"]) >= 0 //word length > 0
) {
//console.log(key);
return (html = define_replace(
val["word"],
val["definition"],
val["kana"],
val["romaji"],
val["note"],
htmlContent,
key
));
}
})
);
});
}
}); //end return this.each(function()
}; //end $.fn.definitions
//inject class before and after found word in html
var define_replace = function(word, def, kan, rom, note, html, key) {
//console.log(arguments);
var re;
return html.replace(
word + "",
'<a data-html="true"' +
'data-toggle="popover"' +
'data-title="' + word + '"' +
'data-content="definition">' +
word + "" + "</a>",
"gi"
);
}; // end define_replace
}(jQuery));
$(function() { //can remove function and $words to words
var $words = [{
word: "今日",
definition: "adjective today, this day, these days, recently, nowadays"
},
{
word: "毎日",
definition: "every day"
},
{
word: "も",
definition: "adjective today, this day, these days, recently, nowadays"
},
{
word: "頑張りましょう",
definition: "verb to persevere, to persist, to keep at it, to hang on, to hold out, to do one\'s best"
},
];
$('.define').definitions({
term: $words
});
}); //end $(function()
$(function () {
$('[data-toggle="popover"]').popover()
})
HTML
<p class="define">毎日 今日 も 今日 頑張りましょう </p>
Here is a codepen link to the code in action. As you can see the repeated word in the middle is not activating and in the console it has no markup pushed to it.