Question

我在使用jQuery时遇到了一些麻烦。

我正在创建一个简单的CMS，并且在界面中我有一个页面列表，每个列表项中都有一个编辑链接。我让jQuery用该编辑ID监听点击。然后它将查看父LI以查看它具有的id，以便用户可以将更改保存到数据库中的右侧pageId。

我的清单

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a href="#" id="edit">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a href="#" id="edit">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>

和javascript

<script type="text/javascript">
$(document).ready(function() {
    $('a#edit').click(function(){
        alert($(this).parent("li").attr("id"));
    })
});

但只有第一个编辑链接有效。所有其他人都被忽略了。您可以在此处查看问题，http://info.radio-onair.ath.cx/active/scms/admin/pages/test.html

提前致谢。

Answer 1

在HTML中，id指的是唯一标识符。换句话说，具有相同id的2个元素是违反标准的。这里的jQuery行为正确。

使用class代替id来识别您的代码：

<强> HTML：

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a class="edit" href="#">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a class="edit" href="#">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>

<强> JavaScript的：

$(document).ready(function() {
        $('a.edit').click(function(){
                alert($(this).parent("li").attr("id"));
        })
});

或者，由于父标记似乎已经具有唯一的类，因此您可以简单地使用它来定位所需的标记。这将减少我称之为“类噪声”（将无用类定义为可以由其父级的唯一属性作为目标的目标元素）。

<强> HTML：

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a href="#">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a href="#">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>

<强> JavaScript的：

$(document).ready(function() {
        $("li.sortable a:contains('edit')").click(function(){
                alert($(this).parent("li").attr("id"));
        })
});

Answer 2

我认为这是因为每个元素使用相同的 id 。请尝试使用课程。

<a href="#" class="edit">edit</a>

然后

$('a.edit').click(...)

Answer 3

您不能拥有两个具有相同ID的元素。这是无效的HTML。也许你想要一个班级？

尝试：

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a href="#" class="edit">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a href="#" class="edit">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>


<script type="text/javascript">
$(document).ready(function() {
    $('a.edit').click(function(){
        alert($(this).parent("li").attr("id"));
    })
});
</script>

Answer 4

ID必须是唯一的，而类名可以是相同的。

Answer 5

我尝试了你的链接，看起来所有的警报都已连线并正常工作，只是没有按顺序排列（2是5等）

Answer 6

如果您不想更改HTML（但您应该），可以试试这个：

$(document).ready(function() {
        $('a:contains("edit")').click(function(){
                alert($(this).parent("li").attr("id"));
        })
});

Answer 7

我不知道其他人说了什么，但我刚刚改变了

<a id="anyidname"..

从花哨的盒子......到我的html / php页面末尾的这个脚本......以及标签

<a rel="anyclassname"..

<script type="text/javascript">
 $(document).ready(function(){
$('a[rel="anyclassname"]').fancybox({
    'width'         : '75%',
    'height'        : '75%',
    'autoScale'         : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'          : 'iframe'
});
  });
</script>"

jQuery单击功能仅适用于第一个元素

7 个答案: