jquery选择器在多个元素时不起作用答案

【问题标题】：jquery selector wont work when multiple elementsjquery选择器在多个元素时不起作用
【发布时间】：2015-12-27 15:54:31
【问题描述】：

我的 jquery 选择器有点问题。当我只有一个列表项时，jquery 代码可以正常工作。但是当我有多个时，chatid 具有第一个列表项的值。为什么我总是得到第一个列表项的 id？

我的 html 和 foreach 循环：

   <ul data-role="listview" id="uItem1" data-inset="true">
    <?php foreach ($result as $keyres => $rowres): ?>

        <li><a class="chat" id="<?php echo $rowres['id']; ?>" href="accept.php">chat</a></li>

        <?php endforeach; ?>
    </ul>

我的 jquery：

$("#uItem1 > li > a").click(function() {
    var chatid = $("#uItem1 > li > a").attr('id');

    $.ajax({ url: 'read.php',
     data: {chatid},
     type: 'POST',
     success: function(output) {
                //  alert(output);
              }
    });                     

   });

【问题讨论】：

使用each迭代$("#uItem1 > li > a")，创建一个数组并通过ajax将数组传递给服务器。
那是因为attr()只能获取集合中第一个元素的属性，无法获取所有元素的属性。你可能想要的只是var chatid = this.id
您不必在处理函数中再次使用相同的选择器。只需使用 var chatid = this.id; 即可获取正在处理的项目的 ID

标签： javascript jquery foreach

【解决方案1】：

你需要使用$(this)

var chatid = $(this).attr('id');

当你在 php 中使用 foreach 来生成元素时，你可能需要

$("#uItem1").on('click',' > li > a',function() {

正如@Rory 在 cmets 中提到的，您可以使用 this.id

【讨论】：

@RoryMcCrossan 当然.. 但我只是喜欢 jquery 方式，而他已经在使用 jquery
很公平，但是访问已经可以访问的元素的属性比创建一个新的 jQuery 对象来检索单个属性更好、更快。
@RoryMcCrossan 当然我同意你的观点，但我只是不知道 OP 的性能，不要对 js 和 jquery 感到困惑 .. 所以我只是让他保持自己的轨道 .. 无论如何我更新我的回答是:)

【解决方案2】：

变化：

var chatid = $("#uItem1 > li > a").attr('id');

收件人：

var chatid = this.id;
var chatid = $(this).attr('id');   // For some reason if the previous didn't work.

【讨论】：

【解决方案3】：

您需要使用this 关键字来引用引发事件的元素。从那里你可以得到它的id 属性。另请注意，您在$.ajax 调用中发送的对象无效，它需要一个键和一个值。试试这个：

$("#uItem1 > li > a").click(function() {
    var chatid = this.id;

    $.ajax({ url: 'read.php',
        data: {
            'chatid': chatid 
        },
        type: 'POST',
        success: function(output) {
            //  alert(output);
        }
    });                     
});

【讨论】：