更改每个<李>元素在<ol>

Changing the onclick of every <li> element in a <ol>

本文关键字：gt lt 元素 ol      更新时间：2023-09-26

我有一个jQueryUI可排序的li按钮列表，带有以下标记：

<ol id="tracks" class="ui-sortable">
<li class="pl_clipEntry ui-widget-content ui-draggable ui-draggable-handle">
    <span class="pl_slot_1_clipNumber_6">6. </span>
    <span class="pl_clipName">
        <button class="pl_entry" onclick="emitCommand('goto: clip id: 6')">Clip Copy 3.mov</button>
    </span>
    <span class="pl_clipLength">(00min17sec)</span>
</li>
</ol>

这些项目是从另一个列表中拖动的，在那里它们的onclick很有用现在，每当列表排序（或插入新项目）时，我都想覆盖onclick，这样THIS列表中的项目就有了不同的功能（事实上，它将是一个播放列表，这就是为什么onclick命令不能与文件列表中的相同）

我不知道该怎么做。

这是在每次列表更新时调用的：

function updatePlaylist () {
    var list = $("#tracks");
    list.children(':not(.placeholder)').each(function(index) {
        console.log($(this).childNodes[1].text());  // to check if it works
        //$(this).children[1].attr("onclick","play_clip:" + index);
    });
};

因此，简单地说：我想将每个li>span>按钮的onclick设置为"play_clip6"等。

我在children[1]和childnodes[1]中尝试过，但它们都是未定义的。

我想这是关于"这个"的范围，或者我忽略了其他一些事情。。但这不应该奏效吗？我被卡住了：(感谢

我认为您缺少的是每个函数中被引用元素的参数。

HTML

<ol id="tracks">
    <li>Track 1 <span style="color:red;">sp1</span>  <span style="color:blue;">Play 1</span>
    </li>
    <li>Track 2 <span style="color:red;">sp1</span>  <span style="color:blue;">Play 2</span>
    </li>
    <li>Track 3 <span style="color:red;">sp1</span>  <span style="color:blue;">Play 3</span>
    </li>
    <li>Track 4 <span style="color:red;">sp1</span>  <span style="color:blue;">Play 4</span>
    </li>
    <li class="placeholder">Move Track Here</li>
</ol>
<button id="changeIt">Change The Click Event</button>

JS-

$(function () {
    $("#tracks").children(":not(.placeholder)").each(function (index, elem) {
        var cElem = $(elem).children().eq(1);
        $(cElem).click(function () {
            alert("before: " + $(cElem).text());
        });
    });
});
$("#changeIt").click(function () {
    $("#tracks").children(":not(.placeholder)").each(function (index, elem) {
        var cElem = $(elem).children().eq(1);
        $(cElem).attr('onclick', '').unbind('click');
        $(cElem).click(function () {
            alert("after: " + $(cElem).text());
        });
    });
});

编辑以选择内的按钮

HTML

<ol id="tracks">
    <li>Track 1 <span style="color:red;">sp1</span>  <span style="color:blue;"><button>Play 1</button></span>
    </li>
    <li>Track 2 <span style="color:red;">sp1</span>  <span style="color:blue;"><button>Play 2</button></span>
    </li>
    <li>Track 3 <span style="color:red;">sp1</span>  <span style="color:blue;"><button>Play 3</button></span>
    </li>
    <li>Track 4 <span style="color:red;">sp1</span>  <span style="color:blue;"><button>Play 4</button></span>
    </li>
    <li class="placeholder">Move Track Here</li>
</ol>
<button id="changeIt">Change The Click Event</button>

JS-

$(function () {
    $("#tracks").children(":not(.placeholder)").each(function (index, elem) {
        var cElem = $(elem).children().eq(1).children().eq(0);
        $(cElem).click(function () {
            alert("before: " + $(cElem).text());
        });
    });
});
$("#changeIt").click(function () {
    $("#tracks").children(":not(.placeholder)").each(function (index, elem) {
        var cElem = $(elem).children().eq(1).children().eq(0);
        $(cElem).attr('onclick', '').unbind('click');
        $(cElem).click(function () {
            alert("after: " + $(cElem).text());
        });
    });
});
相关文章：