Does .prependTo() follow the jQuery chaining?

Question

I'm making a project, and in some line, there's a check button that when checked it relocates it's parent to the bottom. Here's it's markup :

<div id="tasksWrapper">
    <div class="subTaskWrapper">
        <div class="subTask">
            <div class="subMarker"></div>
            <label class="subTaskLabel"></label>
            <div class="subHolder"></div>
            <div class="subOptions">
                <ul>
                    <li id="subInfo">Details</li>
                    <li id="subEdit">Edit</li>
                    <li id="subDelete">Delete</li>
                </ul>
            </div>
            <div class="checkButton"></div>
            <div class="optTrigger"></div>
        </div>
        // more than one of that subTask divs ...
    </div>
</div>

And here's it's code :

$("#tasksWrapper").on("click", ".subTask .checkButton", function(){
    if($(this).parent().data("checked") == true){
        $(this).css("opacity", "0.2")
            .siblings(".optTrigger , .subHolder").show()
            .parent().data("checked",false);
    } else {
        $(this).css("opacity", "1.0")
            .siblings(".optTrigger , .subHolder").hide()
            .parent().data("checked",true).appendTo($(this).parent().parent());
    }

});

I want the .subTask div to be appended to .subTaskWrapper div, so in the else case i tried this first :

else {
        $(this).css("opacity", "1.0")
            .siblings(".optTrigger , .subHolder").hide()
            .parent().data("checked",true).appendTo($(this).parent());
    }

I thought .appendTo in this case will append .subTask div to the .subTaskWrapper div, but i got this error :

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

But when i added another .parent() to the .appendTo($(this).parent()) , it worked, so it became

.appendTo($(this).parent().parent())

I want to know why this Exception is generated in the first case and how .appendTo is affected when it's located after .parent(), Does it append .parent() or just the original $(this) ?

You said that your code is working with `parent().parent()`. Don't fix what is not broken :). To confirm to yourself though why it is working that way try using debugging tools in your browser such as `console.log($(this))`, `console.log($(this).parent())`, `console.log($(this).parent().data("checked", true))`, etc. Also you are asking `Does .prependTo() follow the jQuery chaining?` but all your code relates to `appendTo()`, which is confusing. — Nope, Sep 03 '12 at 18:30
I tried to use `console.log()` but i want to place it instead of `.appendTo()` to know what's the current `$(this)`, but i think i can't do that in jQuery, any help putting `.console.log()` in the position of `appendTo()` would be appreciated. — Rafael Adel, Sep 03 '12 at 18:36
Within your `else` just place the console log for each element you are "chaining" and watch the console. For example place console log into your else statement for : `$(this)`, `$(this).css("opacity", "1.0")`, `$(this).css("opacity", "1.0").siblings(".optTrigger , .subHolder")`, `$(this).css("opacity", "1.0").siblings(".optTrigger , .subHolder").hide().parent()`, `$(this).css("opacity", "1.0").siblings(".optTrigger , .subHolder").hide().parent().data("checked",true)` and off course `$(this).parent()` and `$(this).parent().parent()`. — Nope, Sep 03 '12 at 18:48

score 4 · Accepted Answer · answered Sep 03 '12 at 18:19

4

It looks like you're appending an element to itself; that would explain the DOM hierarchy error. If you strip out the core parts of the chain, the effect is:

$(this).parent().appendTo($(this).parent());

In other words:

$(this).css("opacity", "1.0")                 // $(this) refers to checkButton
    .siblings(".optTrigger , .subHolder")     // context is still checkButton
    .hide()
    .parent()                                 // context is now subTask
    .data("checked",true)                     // still subTask
    .appendTo($(this).parent());              // $(this).parent() is subTask
                               // so, this line says to append subTask to itself

answered Sep 03 '12 at 18:19

McGarnagle

101,349
31
229
260

Ah, so `$(this).parent()` that's inside `.appendTo()` refers to `.subTask` not `.subTaskWrapper` ? Then `.appendTo()` doesn't follow jQuery chaining ? Because i thought that `$(this)` inside `.appendTo()` refers to `.subTask`. – Rafael Adel Sep 03 '12 at 18:24
@Rafael no, I think that's normal chaining behavior -- chaining just means that each method call returns the same source object. – McGarnagle Sep 03 '12 at 18:33
@Rafael: Instead of second guessing which element is where I think that all your questions can be answered with console.log outputs. See my comment on original question. – Nope Sep 03 '12 at 18:34
@Rafael `this` isn't related to chaining or JQuery. The `this` context would never change just like that. – McGarnagle Sep 03 '12 at 18:39

Does .prependTo() follow the jQuery chaining?

1 Answers1