Question

我是jquery / javascript的新手，我有一个需要帮助的任务。我正在制作座位表。每个桌面对象都有一个data-id。用户对象也具有data-id。我理想的做法是在页面加载，jquery / javascript将循环遍历所有桌面对象和所有用户对象并找到匹配。如果匹配，则将用户对象重新定位在桌面对象上以表示坐在该桌面的用户。我不知道从哪里开始，任何帮助都会受到赞赏....

现在看起来像什么的基本示例

<td class="desk" data-id="4-1"></td>//desk object
<td class="desk" data-id="4-2"></td>//desk object
<td class="desk" data-id="4-3"></td>//desk object

<span class="user" data-id="4-1"></span>//user object
<span class="user" data-id="4-2"></span>//user object

更新

我可能需要更多你的帮助...... 我想编码的逻辑如下： 1）当页面加载时（将使用php从数据库加载元素），将所有用户元素移动到匹配的桌面（谢谢大家的建议）。 2）可能存在将多个用户分配到桌面的情况。在这种情况下，将添加一个共享的css类（显示2种颜色，表示有多个用户坐在那里）。

问题：

我和Nathan的代码一起去了。如何调整此代码以考虑对相同data-id的两个匹配，并添加css类“shared”以及元素信息（info很可能是由php填充的数据库ID）？我将两个用户元素调整为与其中一个桌面相同的数据ID。

以下是我项目的更多信息（我已经删除了一些冗余或不必要的代码部分）：

<style>
#elementContainer {
    background: green;
    bottom: -180px; //theres animation for this that i have not included since its not relevent
    width: 100%;
    position: fixed;

}
.shared {
background-image: linear-gradient(bottom, pink 50%, red 50%);
background-image: -o-linear-gradient(bottom, pink 50%, red 50%);
background-image: -moz-linear-gradient(bottom, pink 50%, red 50%);
background-image: -webkit-linear-gradient(bottom, pink 50%, red 50%);
background-image: -ms-linear-gradient(bottom, pink 50%, red 50%);
}
.dragTest{
    height: 50px;
    width: 50px;
    background: red;
    display: inline-block;
    position: absolute;
    z-index: 11;
}
td{
    height: 50px;
    width: 50px;
    margin: 1px;
    background: blue;
    display: inline-block;
}


.row{
    margin-bottom: 30px;
}
</style>

<div class='seatingChart'>
    <div class="container">
        <div class="row">
            <div class="col-md-2"><!-- Group 5 -->
                <table>
                    <tr>
                        <td class="desk" data-id="5-1"></td>
                        <td class="desk" data-id="5-2"></td>
                    </tr>
                    <tr>
                        <td class="desk" data-id="5-3"></td>
                        <td class="desk" data-id="5-4"></td>
                    </tr>
                    <tr>
                        <td class="desk" data-id="5-5"></td>
                        <td class="desk" data-id="5-6"></td>
                    </tr>
                    <tr>
                        <td class="desk" data-id="5-7"></td>
                        <td class="desk" data-id="5-8"></td>
                    </tr>
                </table>
            </div><!-- End of Group 5 -->
        </div>
    </div>
</div>  
<div id='elementContainer'>
    <div class="container">
        <div class='row'>
            <div class='col-md-4 col-md-offset-4'>
            <div class="user" data-id="5-8" data-name='Terry' info=""></div>
            <div class="user" data-id="5-2" data-name='Carlos' info=""></div>
            <div class="user" data-id="5-1" data-name='Mary' info=""></div>
            <div class="user shared" data-id="5-1" data-name='Tammy' info=""></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $('.desk').each(function() {
        var $desk = $(this),
            deskId = $desk.data('id'),
            $users = $('.dragTest[data-id="' + deskId + '"]');
            if($users.length) {
                $desk.append($users);
            }
    });
});//end of script
</script>

Answer 1

由于关于页面结构以及每个dom对象需要发生的事情的信息非常少，因此我将限制我对收集类似ID项目的回应。

基本上你需要从你的办公桌开始，并为每个办公桌收集需要链接到它的用户。您可以通过jQuery的each方法实现此目的。

$('.desk').each(function() {
    var $desk = $(this),
        deskId = $desk.data('id'),
        $users = $('.user[data-id="' + deskId + '"]');

    // You now have a jQuery array of users with id's that match
    // this desk. Specific code goes here.
});

显然，上述代码的有用性有限，但如果没有更多信息，则很难提供更具体的指导。

Answer 2

试试这个：

 <span class="desk" data-id="4-1">//desk object</span>
<br>
<span class="desk" data-id="4-2">//desk object</span>
    <br>
<span class="desk" data-id="4-3">//desk object</span>
<br>
<span class="user" data-id="4-1">user object</span>
    <br>
<span class="user" data-id="4-2">user object</span>
        <br>
        <input type="button" id="btn" value="Re-Arrange"/>


   <script>
    $('#btn').click(function()
                    {
    $(".desk").each(function(){
        var desk = $(this);
        $(".user").each(function()
        {
            var user = $(this);       
            if($(user).attr("data-id") == $(desk).attr("data-id"))
            {
               $(desk).append("<br/>");
                $(desk).append($(user));

            }            
        });    
    });
    });

 </script>

http://jsfiddle.net/pbc6cs1u/1/

Answer 3

可能的一种解决方案：

＆＃13;

$('.desk').each(function(){
  var el = $(this);
  var id = el.attr('data-id');
  var user = $('.user[data-id="'+id+'"]');
  el.text(  'desk : ' + id );
  if(user.length) el.append(user.text('user'));
})

＆＃13;

.desk{
  border : solid brown 1px;
  border-radius : 6px;
  padding : 12px;
  margin : 3px;
  display : inline-block;
}

.user{
  border : solid green 1px;
  border-radius : 3px;
  padding : 3px;
  margin : 3px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desk" data-id="4-1"></div>
<div class="desk" data-id="4-2"></div>
<div class="desk" data-id="4-3"></div>

<span class="user" data-id="4-1"></span>
<span class="user" data-id="4-2"></span>

＆＃13;

jquery循环匹配和位置

3 个答案: