jQuery(this) target isn't finding element

Question

How come this works:

jQuery(this).closest("li").find("p").text();

But when I have it inside a function, it doesn't work:

jQuery.each(words, function(i, v) {
    jQuery(this).closest("li").find("p").text();
});

Do I need to pass this through the function?

Full Code:

jQuery(document).ready(function() {
    jQuery('.js-trigger-editb').bind("mouseup", function() {

        // find the p tag that contains the content and split it
        var words = jQuery(this).closest("li").find("p").text().split(" ");

        // wrap words in p tag into span tags
        jQuery.each(words, function(i, v) {
            jQuery(this).closest("li").find("p").append(jQuery("<span>").text(v));
        });

    });
});

OP include html to see that problem :) what is words? `this = v` for this :) — guradio, Apr 26 '16 at 10:49
may be use full http://stackoverflow.com/questions/16346206/targeting-this-within-nested-for-each-loops-in-jquery — Nagaraj S, Apr 26 '16 at 10:53
Like you said, the value of `this` inside the function is the problem. — techfoobar, Apr 26 '16 at 10:54
Why not just cache `jQuery(this).closest("li").find("p")` before your loop and then append to the cached var in the loop? — Pete, Apr 26 '16 at 10:54
@techfoobar Can you please demonstrate how to pass `this` through the function? — Henrik Petterson, Apr 26 '16 at 10:54
@Pete Please post an answer outlining this approach. Not sure if I understand how you mean to *cache*... — Henrik Petterson, Apr 26 '16 at 10:55
@HenrikPetterson - Please see the answer I posted for a way to pass along `this`. — techfoobar, Apr 26 '16 at 10:59
@HenrikPetterson something like this: https://jsfiddle.net/kwav6Le0/ — Pete, Apr 26 '16 at 11:04

score 3 · Accepted Answer · answered Apr 26 '16 at 11:00

I'd like to suggest to save the link to the found "p" element not to search it each time.

    var p = jQuery(this).closest("li").find("p");
    var words = p.text().split(" ");

    jQuery.each(words, function(i, v) {
        p.append(jQuery("<span>").text(v));
    });

score 1 · Answer 2 · answered Apr 26 '16 at 10:55

Like you have mentioned in the question, the value of this inside the function is the problem. Inside the callback for .each(), the value of this is the current item in the array being iterated.

Something like this should work:

var elem = this; // here, 'this' is the element. Store it.

jQuery.each(words, function(i, v) {

    // use the stored element handle from 'elem'
    jQuery(elem).closest("li").find("p").append(jQuery("<span>").text(v));
});

score 1 · Answer 3 · answered Apr 26 '16 at 10:57

jQuery(this) is a reference to the DOM element of invocation. So it is different element when you call it inside jQuery('.js-trigger-editb').bind("mouseup", function() {}); and jQuery.each(words, function(i, v) {});.

Try to save it outside the .each.

Try:

var $this= jQuery(this);
jQuery.each(words, function(i, v) {
    $this.closest("li").find("p").append(jQuery("<span>").text(v));
});

jQuery(this) target isn't finding element

3 Answers3