Where do I put $(this) in the function?

Question

Since I want to use classes instead of id's in these functions(I have three of the same function with different things I want to .append) I am sure I need to put $(this) in those functions somewhere to only trigger only ONE function on button click and not all three of them. but I am not sure because I am a total beginner in jquery/js, so I would appreciate some help.

$(document).ready(function () {
    $(".onclick").click(function () {
        $('#favorites').append('<div data-role="main"class="ui-content"><div  class="ui-grid-b"><div class="ui-block-a">Arrow</div><div class="ui-block-b">More Info</div><div class="ui-block-c">Unfavorite</div></div></div>');
    });
});

http://codepen.io/anon/pen/JYxqEw - HTML And the Jquery Code

Answer 1

$('.onclick') selects all the elements with a class of onclick . That means that, whenever something with class="onclick" is clicked, that function will fire.

If you want all of those elements to append that exact HTML to the #favorites element, then you can leave your code as-is.

However, if what you're trying to do is append that html to the clicked element, that is when you'd use $(this) -- that selects the element you clicked with jQuery, then you can append directly to that element ie:

$(document).ready(function () {
    $(".onclick").click(function () {
        // this will append the HTML to the element that triggered the click event.
        $(this).append('<div data-role="main"class="ui-content"><div  class="ui-grid-b"><div class="ui-block-a">Arrow</div><div class="ui-block-b">More Info</div><div class="ui-block-c">Unfavorite</div></div></div>');
    });
});

EDIT

so to insert the contents of each .onclick into #favorites , you'll need to use the innerHTML value of the DOM node. example fiddle:

http://jsbin.com/qazepubuzu/edit?html,js,output

When you select something with jQuery, you're actually getting back not just the DOM node, but a jQuery object -- this object contains both a reference to the actual DOM node ( [0] ), as well as a jquery object ( [1] ).

So to select the DOM node with $(this) , you target the node: $(this)[0] . Then you can use .innerHTML() to grab the HTML contents of the node and do as you like.

Final result:

$(function () {
  $('.onclick').click(function () {
    $('#favorites').append( $(this)[0].innerHTML );
  });
});

Answer 2

So the building blocks are not that complex, but I think you're a novice jQuery developer and so you may not be clear on the difference between jQuery and JS yet.

$(selector, context) allows us to create a jQuery collection for a CSS selector which is the child of a current context DOM node, though if you do not specify one there is an automatic one (which is document.body , I think). Various functions iterating over jQuery collections make the particular element available as this within the JavaScript. To get to the strong element from the .onclick element in the HTML fragment you need to travel up in the hierarchy, then to the appropriate element. Then, we can collect the text from the element. We can do this in either JS or jQuery.

To do this with simply jQuery:

// AP style title case, because Chicago is too crazy.
var to_title_case = (function () { // variable scope bracket
    var lower_case = /\b(?:a|an|the|and|for|in|so|nor|to|at|of|up|but|on|yet|by|or)\b/i,
        first_word = /^(\W*)(\w*)/,
        last_word = /(\w*)(\W*)$/;
    function capitalize(word) {
        return word.slice(0, 1).toUpperCase() + word.slice(1).toLowerCase();
    }
    function capitalize_mid(word) {
        return lower_case.exec(word) ? word.toLowerCase() : capitalize(word);
    }
    return function to_title_case(str) {
        var prefix = first_word.exec(str),
            str_minus_prefix = str.slice(prefix[0].length),
            suffix = last_word.exec(str_minus_prefix),
            center = str_minus_prefix.slice(0, -suffix[0].length);
        return prefix[1] + capitalize(prefix[2]) + center.replace(/\w+/g, capitalize_mid)
                + capitalize(suffix[1]) + suffix[2];
    };
})();

$(document).ready(function() {
    $(".onclick").click(function () {
        var text = $(this).parents('.ui-grid-a').find('.ui-block-a').text();
        var html = '<div data-role="main"class="ui-content">'
                 + '<div class="ui-grid-b"><div class="ui-block-a">' 
                 + to_title_case(text) + '</div><div class="ui-block-b">More Info</div>'
                 + '<div class="ui-block-c">Unfavorite</div></div></div>';
        $("#favorites").append(html);
    });
});