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

问题描述

这是我第一次使用同位素。所以，我在我的 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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）