Parsing $(this) into a JQuery/JS function. Can it be done?

Question

Ok so finding any material on this or $(this) using any search engine is ridiculously hard. So I hope I haven't missed something obvious.

Basically what I'm trying to accomplish parsing of a click'd DOM object into a function and then operating recursively through that object's siblings and running some operators. (you can find the code below along with a link to the live page)

All the reference's I've found thus far (including this) have involved calling built-in function on $(this) such that $(this).find('p') however what I'm trying to do is parse it as a parameter to my function thus insertRow($(this)) is this possible? If not how can I use the above call style and access the object in my function?

Here's the code I've got thus far. I've included addRow to show what I've got working currently. And the works in progress are insertRow(row) and incrementRows(row). I guess it's also possible that I've screwed up the layering of .click events in the `$(document).ready(); area. I'm really at a loss currently.

Oh and the page as it stands. http://azarel-howard.me/stage-management/script-writer/

var currentScene = 1, currentRow = 0;
function addRow() {
    if (currentRow==0) {
        $("#scriptContent").append("<div class=\'row\' data-scene=\'" + currentScene + "\' data-row=\'" + currentRow + "\'><div class=\'col-lg-2\' id=\'scene\'><div class=\'row\'><div class=\'col-lg-12\'><label class=\'checkbox checked\' for=\'checkbox1\'><span class=\'icons\'><span class=\'first-icon fui-checkbox-unchecked\'></span><span class=\'second-icon fui-checkbox-checked\'></span></span><input type=\'checkbox\' value=\'\' id=\'checkbox1\' data-toggle=\'checkbox\'>New Scene</label></div></div><div class=\'row\'><div class=\'col-lg-12\'><h6>Scene " + currentScene + "</h6></div></div></div><div class=\'col-lg-10\' id=\'script;\'><textarea rows=\'3\' placeholder=\'Add Scene Title...\' class=\'form-control\'></textarea></div></div> <!-- row close -->");
        currentRow++;
    } else {
        $("#scriptContent").append("<div class=\'row\' data-scene=\'" + currentScene + "\' data-row=\'" + currentRow + "\'><div class=\'col-lg-2\' id=\'scene\'><div class=\'row\'><div class=\'col-lg-12\'><label class=\'checkbox\' for=\'checkbox1\'><span class=\'icons\'><span class=\'first-icon fui-checkbox-unchecked\'></span><span class=\'second-icon fui-checkbox-checked\'></span></span><input type=\'checkbox\' value=\'\' id=\'checkbox1\' data-toggle=\'checkbox\'>New Scene</label></div></div><div class=\'row\'><div class=\'col-lg-12\'><input type=\'text\' placeholder=\'Line Label\' class=\'form-control input-sm\'></input></div></div></div><div class=\'col-lg-10\' id=\'script;\'><textarea rows=\'3\' placeholder=\'Add script...\' class=\'form-control\'></textarea></div></div> <!-- row close -->");
        currentRow++;
    }
}
function insertRow(row) {
    incrementRows(row.next().find(".row"));
    $(row).after("<div class=\'row\'><div class=\'col-lg-2\' id=\'scene\'><div class=\'row\'><div class=\'col-lg-12\'><label class=\'checkbox\' for=\'checkbox1\'><input type=\'checkbox\' value=\'\' id=\'checkbox1\' data-toggle=\'checkbox\'>New Scene</label></div></div><div class=\'row\'><div class=\'col-lg-12\'><input type=\'text\' placeholder=\'Line Label\' class=\'form-control input-sm\'></input></div></div></div><div class=\'col-lg-10\' id=\'script;\'><textarea rows=\'3\' placeholder=\'Add script...\' class=\'form-control\'></textarea></div></div> <!-- row close -->");
}
function incrementRows(row) {
    var nextRow = $(row).next().find(".row");
    if (row.data("scene") == nextRow.data("scene")) {
        if ((row.data("row")+1) == nextRow.data("row")) {
            incrementRows(nextRow);
        }
    }
    row.data("row") += 1;
}
$(document).ready(function(){
    $("#addRowBtn").click(addRow);
    $("#insertRowBtn").click(function() {
        // solution applied
        //$(".row").click(insertRow(this));
        $(".row").click( function() {
            insertRow($(this))
        });
    });
    //$(".checkbox").click(function() {
    //  if ()
    //})

    addRow();
    addRow();
});

`$(".row").click(insertRow(this));` should be `$(".row").click(insertRow);` But nesting handler declaration inside other handler is bad — A. Wolff, Dec 18 '13 at 12:40
Unrelated to your question, but you should look into a template lib... HTML in a JS string is IMPOSSIBLE to debug without a headache. — srquinn, Dec 18 '13 at 12:41
Might want to read the [jQuery .click documentation](http://api.jquery.com/click/). If I understand you correctly it’s pretty simple. — Timothy Miller, Dec 18 '13 at 12:41
@ArunPJohny That is the same as `$(".row").click(insertRow);` — A. Wolff, Dec 18 '13 at 12:42
@A.Wolff no.. `(".row").click(insertRow)` will give the first argument as the event object where as OP wants the `row` element — Arun P Johny, Dec 18 '13 at 12:42
@ArunPJohny good point, i was thinking about OP use `this` inside handler, not element passed as argument, which then is still useless in this case. But well, this is all what about is the question, so my bad! — A. Wolff, Dec 18 '13 at 12:43
I think you want to pass the object as an argument and not parse it (textual analysis) — Rune FS, Dec 18 '13 at 12:43
in the insertrowbtn click handler you are passing the button to the insertRow method and not .row — Rune FS, Dec 18 '13 at 12:47
@ArunPJohny is in the right with His first code suggestion. I'm confused as to why functions with arguments can only be called inside other functions. Why not directly like any other language? Anyway I'm accepting Djave's answer as it covers the spectrum of uses whilst giving the proper way to input this — azariah, Dec 18 '13 at 14:03
Probably. :) My UNI lecturers always say parse so... Can I blame them for incorrect grammar? :P and would you believe it my script still isn't working. :/ I'll have to go over my code again. :P oh woops. I've 'row' and '$(row)' in two different areas. What's the bet I need to change one. :P — azariah, Dec 19 '13 at 01:17

score 1 · Accepted Answer · answered Dec 18 '13 at 12:39

1

Usually its perfectly OK to assign this to a variable. For instance:

var dom_element = $(this);
dom_element.fadeOut();

Or

function do_fadeout(element){
    element.fadeOut();
}
$('#target_div_id').click(function(){
    var dom_element = $(this);
    do_fadeout(dom_element);
    // or just do_fadeout($(this));
})

answered Dec 18 '13 at 12:39

Djave

8,595
8
70
124

Thanks for that. Still trying to wrap my head around the logic of having to declare an anonymous function just to parse arguments to a declared function but... If that's how we must do it, then it must be done. :/ – azariah Dec 18 '13 at 14:06

Parsing $(this) into a JQuery/JS function. Can it be done?

1 Answers1