javascript - 使用同位素，为什么我的网格不更新？

Question

这是我第一次使用同位素。因此，我在 document.ready 函数中创建同位素实例，如下所示：

                        var grid = $('.headshots-list');

                    grid.isotope({
                        // options
                        itemSelector: '.headshots-list-item-alt',
                        layoutMode: 'fitRows',
                        sortBy: '[data-number]'
                    });

然后我设置网格布局中每个元素的值，包括设置 data-number 属性。

 $("#headshot_" + $(this).val()).attr('data-number', 2); // Users who are not chairpersons

 $("#headshot_" + $(this).val()).attr('data-number', 1); // Users who are chairpersons

然后我尝试对网格进行排序。目前，我使用 setTimeout 只是因为我正在测试是否可能有竞争条件，但这没有任何区别。网格不会以我期望的方式对自身进行排序，因此数据编号为 1 的用户将显示在所有其他用户之前。正在设置这些属性。可以肯定的是，我已经查看了开发工具中的元素。正如我之前提到的，这是我第一次使用同位素，所以不确定我做错了什么。任何指向正确方向的指针将不胜感激。

正如下面所要求的，这是我构建与此相关的 li 的 HTML。

    <li id="headshot_<?php echo $user->ID; ?>"
                            data-number = "1" class="headshots-list-item-alt js-headshot <?php echo $user_terms_classes . ' ' . $board_status . ' ' . $number; ?>"
                            data-toggle="modal"
                            data-target="#memberInfo_<?php echo $member_id; ?>">
                            <div class="headshot-list-item-inner">
                                <div class="headshot-list-photo">
                                    <?php //suppress photo until they come in
                                    ?>
                                    <?php if ($photo_id): ?>
                                        <?php // echo wp_get_attachment_image( $photo_id, 'Avatar' ); ?>
                                    <?php else: ?>
                                        <?php // echo '<img src="https:somedomain.com/imgs/user_img.jpg"/>'; ?>
                                    <?php endif; ?>
                                </div>
                                <h4 class="no-margin">
                                    <a href="#"><?php echo $name; ?></a>
                                    <input type="hidden" class="user_id" value="<?php echo $user->ID; ?>">
                                    <span style="font-size:14px; display: block; position: relative; width: 100%;"
                                          class="chair_designation" id="chair_designation_<?php echo $user->ID ?>">
                                    </span>
                                </h4>
                                <p class="no-margin"><?php echo $title; ?></p>
                                <span class="headshot-list-item-tag">View Bio</span>
                            </div>
                        </li>

标签： javascriptjqueryjquery-isotope