How to return DOM element with dynamic wrap() method

JavaScript
1

I want to bind a group of classes to their corresponding text nodes on click but unfortunately, I’m getting undefined for the wrap method. On click, the code should pick the selected text and wrap it in either paragraphs or what was clicked and and join it to the previous text. However, the wrap() method returns undefined and despite putting get(0) and [0] after it before doing a typeof,just to see what it returns. Can anyone figure out how to make this work?
I have the following markup

 <div class=paragraph> hhh </div><div class=bold> yyy </div><div class=underline> ddd </div><div class=italics> nnn </div>
  <textarea> </textarea>

And the following code

$(document).ready(function(){
var t = $("textarea:not(#testimony)"), a = ['.paragraph', '.underline', '.italics', '.bold'], b = ["<p></p>", "<u></u>", "<i></i>", "<b></b>"];
t.on("focus", function() {
var d = $(this).val(), f = d.substr(d.selectionStart, d.selectionEnd), g = $(this);
for (var i = 0; i < a.length; i++) {
	$(a[i]).bind("click", function(){
		g.val(d.substr(0, d.indexOf(f)) + $(f).wrap(b[i])[0].prop('outerHTML') + d.substr(d.indexOf(f)));
	});
}

});
});

I have alternatively tried using the wrap function instead by altering this line

g.val(d.substr(0, d.indexOf(f)) + $(f).wrap(function(){
      return b[i] + $(this).text() + b[i].substr(0, 1) + "/" + b[i].substr(1);
    }) + d.substr(d.indexOf(f)));

And changing my array to

b = ["<p>", "<u>", "<i>", "<b>"];

But instead, it does an object to string conversion.

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.