javascript - 检索元素父索引

Question

关于这段代码

<ul class='target'>
    <li><a>zero</a></li>
    <li><a>one</a></li>
    <li><a>two</a></li>
    <li><a>three</a></li>
</ul>
<ul class='target'>
    <li><a>zero</a></li>
    <li><a>one</a></li>
    <li><a>two</a></li>
    <li><a>three</a></li>
</ul>
<ul class='target'>
    <li><a>zero</a></li>
    <li><a>one</a></li>
    <li><a>two</a></li>
    <li><a>three</a></li>
</ul>

和这个javascript

$('ul.target li a').on('click', function() {
    var index = $(this).parent().index();
    alert(index);
    return false;
});

当单击“li”中的“a”时，我会收到该索引，这很好，但是... 当我点击第三个“ul”内的第三个“li”时，如何获得中间(第二个)“ul”的索引？或者另一个索引而不是点击的(这个)索引？

编辑

主文件中的html代码

    <script type="text/javascript">
    $(function()
    { // início do jquery
        $("tr.me_pega td a")
        .click(function()
        // .mouseover(function()
        {
            //var status_id = $("tr.me_pega:eq(" + index + ") td:eq(0) a").html(),
            var index = $("tr.me_pega td a").index(this),
            tr = $("tr.me_pega:eq(" + index + ")"),
            first_td = $("tr.me_pega:eq(" + index + ") td:eq(0)"),
            status_id = $("tr.me_pega:eq(" + index + ") td:eq(0) a").html(),
            status_name = $("tr.me_pega:eq(" + index + ") td:eq(5) span font").html(),
            td_status = $("tr.me_pega:eq(" + index + ") td:eq(5)");

            //alert(status_id);

            //td_status.html("<td colspan=\"10\" style=\"font-size: 0.8em;text-align: center; padding-bottom: 0px;\"><img src=\"/img/ajax-loader.gif\" width=\"14px\" height=\"14px\"></td>");
            //alert(status_name);
            if(status_name == "Analyzing")
            {
                alert("pegou");
            }
            // if(!confirm("            Attention!\r\n This inform current status is {Pending} and if you proceed it will be changed to {Analyzing}.\r\n If you dont want to, please do not continue and press [Cancel] button."))
                // return false;
            $.post('/ajax.php',{loadeditstatus: status_id},function(data)
            {
                if(!data[0])
                {
                    td_status.css("font-weight","normal");
                    td_status.html("<font color=\"red\">Failed. Status id " + status_id + " not found.</font>");
                    //tr.delay( 800 ).hide(300).post('/ajax.php',{setsuspicious: status_id});
                    //TODO reload list
                }
                else
                {
                    first_td.html(status_id);
                    td_status.html(data[1]+data[2]);
                }
            }, "json");
            return false;
        });
    });
    </script>
    <?PHP
                        while($sql = mysql_fetch_array($check))
                        {
                            echo '
                        <tr class="me_pega">
                            <td align="center" style="font-size: 0.8em;">
    <a class"me_pega" href="javascript:void(0)" onfocus="this.blur();" title="View/Manage this inform">'.$sql['id'].'</a>
    <!--/Inform-Donation/Status/'.$sql['id'].'-->
                            </td>
                            <td align="center" style="font-size: 0.8em;">'.$sql['datesent'].'</td>
                            <td align="center" style="font-size: 0.8em;">'.$sql['date'].'</td>
                            <td align="center" style="font-size: 0.8em;">'.$sql['doc'].'</td>
                            <td align="center" style="font-size: 0.8em;">'.$sql['amount'].'</td>
                            <td align="center" style="font-size: 0.8em;" name="status">
                                <b>
                                    <span class="HelperDivIndicator" onMouseOver="ActivateHelperDiv($(this), \'<center>Status</center>\', \'<p><font color=orange><b>Pending</b></font><br/>&nbsp;When you just sent the inform. Approval pending.</p><p><font color=cyan><b>Analyzing</b></font><br/>&nbsp;Being analyzed. Approval pending.</p><p><font color=red><b>Denied</b></font><br/>&nbsp;When not approved. Doc number will not be accepted anymore even in a valid donation.</p><p><font color=red><b>Suspicious</b></font><br/>&nbsp;When the doc number provided has been already used and the inform was <font color=red>denied</font> or <font color=green>credited</font>.<br/>&nbsp;Probably, the account will be blocked or deleted.</p><p><font color=green><b>Credited</b></font><br/>&nbsp;Donation approved and &euro; coins already credited.</p>\');" onMouseOut="$(\'#HelperDivContainer\').hide();">
                                        '.$status_arr[$sql['status']].'
                                        </font>
                                    </span>
                                </b></td>
                        </tr>';
?>

在 ajax.php 中

<?PHP
if(isset($_POST["loadeditstatus"]))
{
    header("Content-Type: text/html; charset=ISO-8859-1");
    connect_db();
    $sql = "
    SELECT * FROM `informs`
    WHERE `id` = '".intval($_POST['loadeditstatus'])."' ";
    $q = mysql_query( $sql );

    $status_arr = array("<font color=orange>Pending","<font color=green>Credited","<font color=cyan>Analyzing","<font color=red>Denied","<font color=red>Suspicious");
    if( mysql_num_rows( $q ) > 0 )
    {
        $sql = mysql_fetch_array($q);
        // $data["result"] = 1;
        // $data["td_status_html"] = '
        $data[] = 1;
        $data[] = '
    <select name="change_status" style="font-size:0.8em; padding: 2px;">
        <option checked="checked">'.$status_arr[$sql["status"]].'</option>
        '.(($sql["status"] == 0)?'':'<option>'.$status_arr[0].'</option>').'
        '.(($sql["status"] == 1)?'':'<option>'.$status_arr[1].'</option>').'
        '.(($sql["status"] == 2)?'':'<option>'.$status_arr[2].'</option>').'
        '.(($sql["status"] == 3)?'':'<option>'.$status_arr[3].'</option>').'
        '.(($sql["status"] == 4)?'':'<option>'.$status_arr[4].'</option>').'
    </select>';
        $data[] = '
<script type="text/javascript">
$(function()
{
    $("tr.me_pega td select[name=\'change_status\']")
    //.click(function()
    .change(function()
    {
        //var status_id = $("tr.me_pega:eq(" + index + ") td:eq(0) a").html(),
        var index = $("tr.me_pega td[name=\'status\'] select").prev().index(this),
        tr = $("tr.me_pega:eq(" + index + ")"),
        first_td = $("tr.me_pega:eq(" + index + ") td:eq(0)"),
        status_id = $("tr.me_pega:eq(" + index + ") td:eq(0) a").html(),
        td_status = $("tr.me_pega:eq(" + index + ") td:eq(5)");

        alert("ID: " + status_id + " index:" + index);

        //td_status.html("<td colspan=\"10\" style=\"font-size: 0.8em;text-align: center; padding-bottom: 0px;\"><img src=\"/img/ajax-loader.gif\" width=\"14px\" height=\"14px\"></td>");
        /*
        if(!confirm("           Attention!\r\n This inform current status is {Pending} and if you proceed it will be changed to {Analyzing}.\r\n If you dont want to, please do not continue and press [Cancel] button."))
            return false;
        $.post(\'/ajax.php\',{loadeditstatus: status_id},function(data)
        {
            if(!data[0])
            {
                td_status.css("font-weight","normal");
                td_status.html("<font color=\"red\">Failed. Status id " + status_id + " not found.</font>" + data);
                //tr.delay( 800 ).hide(300).post(\'/ajax.php\',{setsuspicious: status_id});
                //TODO reload list
            }
            else
            {
                first_td.html(status_id);
                td_status.html(data[1]);
            }
        }, "json");
        */
        return false;
    });
});
</script>';
    }
    else
        // $data["result"] = 0;
        $data[] = 0;
    echo json_encode($data);
}
?>

现在，我再解释一下

1. 在主文件中，有一个表格，我捕获了对“tr.me_pega”内的“td”内的“a”的点击并发布到 ajax.php
2. 在 ajax.php 中，我向主文件发回一个完整的响应，其中包含更多的 javascript，将加载到“tr.me_pega”(可以有很多 tr.me_pega ) 在主文件中
3. 再次在主文件中，已经有了 ajax.php 的响应，我正在 try catch 包含“td”的“tr.me_pega”的父索引，其中包含带有值的“select”...如果解释很困惑，请告诉我...

Answer 1

使用.prev() 获取前一个ul 元素。如果 index 小于 0 将其值更改为 "no. of li elements - 1 并更改 $('ul .target li a') 到 $('.target'):

Fiddle

$('.target').on('click', function() {
    var index = $(this).prev().index();
    index = index < 0 ? $('ul').length-1 : index;
    alert(index);
    return false;
});

---

或者，如果您不想更改 $('ul.target li a')，您可以执行以下操作:

Fiddle

$('ul.target li a').on('click', function() {
    var index = $(this).parent().parent().prev().index();
    index = index < 0 ? $('ul').length-1 : index;
    alert(index);
    return false;
});

---