Ethan Aaron Vandal Ethan Aaron Vandal - 3 months ago 7
jQuery Question

Get the .html of a dynamically created element's descendant's child with jquery?

I'm trying to get the .html() of

post-content-[[!+post.id]]
using
.on('click')
, however, the console keeps telling me there is no function for
.parent()
.previous()
...

My HTML...

<div class="post-wrapper">
<div class="post-header">
<div class="post-avatar floatLeft">
<a href=""><img class="miniCircle" src="[[!+post.photo]]"></a>
</div>
<div class="post-info floatLeft">
<span class="in-line"><a href="">[[!+post.owner]]</a></span>
<span class="in-line"><time class="timeago smallFont" datetime="[[!+post.date]]"></time></span>
</div>
<div class="clear"></div>

</div>
<div class="post-content">
<div id="post-content-[[!+post.id]]" class="post-content i-content">[[!+post.content]]</div>
</div>
<div class="post-footer">
[[!+post.links]]
<span class="ui-icon ui-icon-star" style="display: inline-block" title="Like">&nbsp;</span>
</div>
</div>


and my script...

$('body').on('click', '.ui-icon', function (event) {
console.log('content: ' + $(this).parent("div").previous("div").descendant(".i-content").html());
// TypeError: $(...).parent(...).previous is not a function
});


How do I eliminate the "TypeError: $(...).parent(...).previous is not a function" and get the content that's in
post-content-[[!+post.id]]
without referring to it by ID?

Getting the html content of that div by ID only works on the first page load, then once my ajax updates the content, even if I use the new ID exactly, it will fail to target because the DOM has changed. But I know I can get the html content if I use relative targeting because I saw it in a tutorial, but that tutorial only exampled a single tier element set with a
<ul>
and its
<li>
children.

Answer

It should be .prev([selector]) and .children([selector]), this will, however, only traverse one line down.

Given a jQuery object that represents a set of DOM elements, the .children() method allows us to search through the children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well. Note also that like most jQuery methods, .children() does not return text nodes; to get all children including text and comment nodes, use .contents().

Alternatively, you could try referencing the child via CSS ancestry.

Here is a nice reference in the documentation, you may find some alternative options that I've not listed. previous() should definitely be prev(), though! As to answer the question.

Here is a reference of an implementation I did a long time ago when I was learning jQuery (I'm still no expert, I do SuiteScript/Automation/Business Logic):

    $(".title").click(function(){
    var height = $(this).parent().children(".content").children("p").height();
    if($(this).parent().children(".content").height() == 0){
        height = height.toString() + 'px';

        /* Reset styling of all posts */
        $(".title").css("color","black");
        $(".content").css({"height": "0px", "color": "#5a5858"});

        /* Set this post's styling */
        $(this).css('color','white');
        $(this).parent().children(".content").css({'height': height, 'color':'white'});
    /* On unclick */    
    } else {
        $(this).css('color', 'black');
        $(this).parent().children(".content").css({'height': '0px', 'color':'#5a5858'});
    }
    });
Comments