How do I add tags to entire comments, not just their text

Question

Currently your comment markup looks similar to the following:

<li class="comment byuser comment-author-rcotwunite odd alt thread-odd thread-alt depth-1" id="comment-7902">
  <div id="div-comment-7902" class="comment-body">
    <div class="comment-author vcard"><!-- ... --></div>
    <div class="comment-meta commentmetadata"><!-- ... --></div>
    <div class="filterDiv SELL show">
      <div class="container">
        <p class="wantosec">I want to SELL</p>
        <p>SUP YALL im here to sell some stuff</p>
        <div class="reply"><!-- ... --></div>
      </div>
    </div>
  </div>
</li>

And the JS which is targeting elements to show/hide:

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");

  if (c == "all") c = "";
  
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

So the issue is that the class you’re using to target elements to show/hide is only applied to a descendant child of the element which represents the full comment (the <li> encapsulating the whole entry, here).

JS DOM Traversal

One solution to targeting that encapsulating <li> instead would be to keep the markup as it is and use the properties on DOM elements to traverse up to the ancestral <li> (though this isn’t terribly efficient):

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");

  if (c == "all") c = "";
  
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i].parentElement.parentElement, "show");
    if (x[i].parentElement.parentElement.className.indexOf(c) > -1) 
      w3AddClass(x[i].parentElement.parentElement, "show");
  }
}

Customize Comment Markup

But perhaps a better solution is to use wp_list_comments()‘s callback argument to specify a function to customize each comment’s generated markup and apply your HTML classes derived from comment meta-data to the entire comment container instead of just the body.

The best way to start might be to simply copy the function body over from the Walker_Comment::comment() method, which is otherwise responsible for rendering comment markup. And then we’ll tweak it to add a couple classes to the containing element if your comment meta exists (I’ve added PHP comments to designate my modifications):

// functions.php

function wpse406332_render_comment( $comment, $args, $depth ) {
  if ( 'div' === $args['style'] ) {
        $tag       = 'div';
        $add_below = 'comment';
    } else {
        $tag       = 'li';
        $add_below = 'div-comment';
    }
 
    $commenter          = wp_get_current_commenter();
    $show_pending_links = isset( $commenter['comment_author'] ) && $commenter['comment_author'];

    // Set up an array to contain classes to be applied to the `<li>`.
    $classes = [];

    if( $this->has_children )
      array_push( $classes, 'parent' );

    // Check for trade meta
    $wantto = get_comment_meta( get_comment_ID(), 'wantto', true );

    // If trade meta is set, add "filterDiv" and trade type to class list.
    if ( isset($wantto) && !empty($wantto) )
      array_push( $classes, 'filterDiv', $wantto );
 
    if ( $commenter['comment_author_email'] ) {
        $moderation_note = __( 'Your comment is awaiting moderation.' );
    } else {
        $moderation_note = __( 'Your comment is awaiting moderation. This is a preview; your comment will be visible after it has been approved.' );
    }
    ?>

    // Finally, add our modified class list to the comment container.
    <<?php echo $tag; ?> <?php comment_class( $classes, $comment ); ?> id="comment-<?php comment_ID(); ?>">
    <?php if ( 'div' !== $args['style'] ) : ?>
    <div id="div-comment-<?php comment_ID(); ?>" class="comment-body">
    <?php endif; ?>
    <div class="comment-author vcard">
        <?php
        if ( 0 != $args['avatar_size'] ) {
            echo get_avatar( $comment, $args['avatar_size'] );
        }
        ?>
        <?php
        $comment_author = get_comment_author_link( $comment );
 
        if ( '0' == $comment->comment_approved && ! $show_pending_links ) {
            $comment_author = get_comment_author( $comment );
        }
 
        printf(
            /* translators: %s: Comment author link. */
            __( '%s <span class="says">says:</span>' ),
            sprintf( '<cite class="fn">%s</cite>', $comment_author )
        );
        ?>
    </div>
    <?php if ( '0' == $comment->comment_approved ) : ?>
    <em class="comment-awaiting-moderation"><?php echo $moderation_note; ?></em>
    <br />
    <?php endif; ?>
 
    <div class="comment-meta commentmetadata">
        <?php
        printf(
            '<a href="%s">%s</a>',
            esc_url( get_comment_link( $comment, $args ) ),
            sprintf(
                /* translators: 1: Comment date, 2: Comment time. */
                __( '%1$s at %2$s' ),
                get_comment_date( '', $comment ),
                get_comment_time()
            )
        );
 
        edit_comment_link( __( '(Edit)' ), ' &nbsp;&nbsp;', '' );
        ?>
    </div>
 
    <?php
    comment_text(
        $comment,
        array_merge(
            $args,
            array(
                'add_below' => $add_below,
                'depth'     => $depth,
                'max_depth' => $args['max_depth'],
            )
        )
    );
    ?>
 
    <?php
    comment_reply_link(
        array_merge(
            $args,
            array(
                'add_below' => $add_below,
                'depth'     => $depth,
                'max_depth' => $args['max_depth'],
                'before'    => '<div class="reply">',
                'after'     => '</div>',
            )
        )
    );
    ?>
 
    <?php if ( 'div' !== $args['style'] ) : ?>
    </div>
    <?php endif; ?>
    <?php
}

Now modify your wp_comment_list() calls to use the modified render function instead of Walker_Comment‘s (you’ll also want to remove the code which adds those classes to the comment text container from your wpse406058_display_comment_meta() function):

// template file

// ...
wp_list_comments(array(
  'style'       => 'ol',
  'short_ping'  => true,
  'callback'    => 'wpse406332_render_comment',
));
// ...

Wrap-Up

This is by no means an exhaustive list of possibilities. Another solution which wouldn’t include modifying the comment markup would be to build a mapping of trade types to <li> elements on page load (using that DOM traversal technique from above), then just referring to those arrays when you need to show/hide comments.

All in all I think customizing the comment markup is the most robust solution, and one which can enable you to further tweak the display for your unique comments use-case (though if your modifications eventually lead to a massive departure from the intent of a simple comment, you might at some point consider using a dedicated post-type for the purpose).

JS DOM Traversal

Customize Comment Markup

Wrap-Up

Related Posts: