Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140734

.each() doesn't push duplicate items

$
0
0

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.


Viewing all articles
Browse latest Browse all 140734

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>