jquery无法从兄弟字段中检索准确的数据

时间:2010-04-07 09:28:14

标签: jquery

想知道什么是错的

<table id=tblDomainVersion>

<tr>
    <td>Version</td>
    <td>No of sites</td>
</tr>

<tr>
    <td class=clsversion>1.25</td>
    <td><a id=expanddomain>3 sites</a><span id=spanshowall></span></td>
</tr>

<tr>
    <td class=clsversion>1.37</td>
    <td><a id=expanddomain>7 sites</a><span id=spanshowall></span></td>
</tr>

</table>


$('#expanddomain').click(function() {

    //the siblings result incorrect
    //select first row will work
    //select second row will no response

    var versionforselected= $('#expanddomain').parent().siblings("td.clsversion").text();
    alert(versionforselected);

    $.ajax({

        url: "ajaxquery.php",
            type: "POST",

        data: 'version='+versionforselected,

        timeout: 900000,                                  

        success:  function(output) {                            

            output= jQuery.trim(output);
            $('#spanshowall').html(output);
        },

    });




});

1 个答案:

答案 0 :(得分:5)

整个文档中元素的ID必须唯一。这意味着,元素不能共享相同的ID (与每个人(应该;)相同)具有唯一的ID卡。)
如果你有多个ID,它将只选择DOM树中出现的第一个ID,这就是为什么它不适用于第二行。

您必须使用

<table id=tblDomainVersion> 
    <tr>
        <td>Version</td>
        <td>No of sites</td>
    </tr>   
    <tr>
        <td class=clsversion>1.25</td>
        <td><a class=expanddomain>3 sites</a><span class=spanshowall></span></td>
    </tr>  
    <tr>
        <td class=clsversion>1.37</td>
        <td><a class=expanddomain>7 sites</a><span class=spanshowall></span></td>
    </tr>  
</table>

$('.expanddomain').click(function() {
    // 'this' refers to the clicked item
    // store a reference to the 'this' to be used in the Ajax callback
    var $this = $(this);

    // if "td.clsversion" comes always before the other cell, you can also do this:
    // var versionforselected = $(this).parent().prev().text();
    var versionforselected = $(this).parent().siblings("td.clsversion").text();


    alert(versionforselected);

    $.ajax({
        url: "ajaxquery.php",
        type: "POST",
        data: 'version='+versionforselected,
        timeout: 900000,                                  
        success:  function(output) {
            // assuming that "<span class=spanshowall></span>" comes always 
            // after the link, you can use `.next()`                           
            $this.next().html(jQuery.trim(output));
        },
   });
};