Question

我正在创建一个脚本，该脚本将使用特定表行的选定数据填充图形；问题是我想在<a>元素内获取文本，但是我不知道如何在<a>元素（粗体）之间检索文本，因为onclick函数位于<i>元素。

这是引起问题的代码：

<a href="www.JohnDoe.com" target="_blank"> **John Doe**</a> 
<i class="fas fa-chart-pie text-secondary" id="test1" onclick="myFunction(this.id)" data-toggle="modal" data-target="#exampleModal"></i>

这是摆弄我想做的事的例子。

https://jsfiddle.net/josema0890/fvnzdrcp/1/

HTML：

<table>
   <thead>
      <tr role="row">
          <th class="text-left sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 138px;">Name</th>
            <th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Country: activate to sort column ascending" style="width: 90px;">Country</th>
            <th class="text-left sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Born Date: activate to sort column ascending" style="width: 63px;">BornDate</th>
            <th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Loged?: activate to sort column ascending" style="width: 58px;">Loged?</th>
            <th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Details: activate to sort column ascending" style="width: 146px;">Details</th>
            <th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Maths: activate to sort column ascending" style="width: 48px;">Maths</th>
            <th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Physics: activate to sort column ascending" style="width: 48px;">Physics</th>
            <th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Spanish: activate to sort column ascending" style="width: 48px;">Spanish</th>
            <th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="P.E: activate to sort column ascending" style="width: 50px;">P.E</th>
            <th class="text-center sorting_desc" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="StudentNumber: activate to sort column ascending" style="width: 61px;" aria-sort="descending">StudentNumber</th>
            <th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="StudentCard: activate to sort column ascending" style="width: 90px;">StudentCard</th>
            <th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="StudentSuperior: activate to sort column ascending" style="width: 57px;">StudentSuperior</th>
    </tr>
  </thead>

  <tbody>
      <tr role="row" class="odd">
          <td class=" text-left"><a href="www.JohnDoe.com" target="_blank"> John Doe</a> <i class="fas fa-chart-pie text-secondary" id="test1" onclick="myFunction(this.id)" data-toggle="modal" data-target="#exampleModal"></i></td>
            <td class=" text-center">ESP</td>
            <td class=" text-left">01/18/19</td>
            <td class=" text-center">✘</td>
            <td class=" text-center">% homework done</td>
            <td class=" text-center" id="test1M">57.0%</td>
            <td class=" text-center" id="test1F">50.0%</td>
            <td class=" text-center" id="test1L">60.0%</td>
            <td class=" text-center" id="test1EF">84.0%</td>
            <td class="text-center sorting_1"><a style="" href="#" target="_blank">0011223344</a></td>
            <td class=" text-center"><a href="#" target="_blank">9988776655</a></td>
            <td class=" text-center"><a href="#" target="_blank">Jane Doe</a></td>
            </tr>
  </tbody>
</table>

jQuery：

//Id's elementos seleccionados
    var idSelectedFlotAlu = ''; //ID of Selected Student
    var idSelectedFlotM = '';  //ID of Maths homework done
    var idSelectedFlotP = '';  //ID of Physics homework done
    var idSelectedFlotL = '';  //ID of Spanish homework done
    var idSelectedFlotEF = ''; //ID of Physics Eduaction homework done
    //Valores elementos selecciondos
    var valSelectedFlotAlu = '';
    var valSelectedFlotM = '';
    var valSelectedFlotF = '';
    var valSelectedFlotL = '';
    var valSelectedFlotEF = '';

    function myFunction(idElemento) {
        idSelectedFlotAlu = "#" + idElemento;
        console.log("ID of idSelectedFlotAlu: " + idSelectedFlotAlu);

        idSelectedFlotM = idSelectedFlotAlu + "M";
        console.log("ID of idSelectedFlotM: " + idSelectedFlotM);

        idSelectedFlotF = idSelectedFlotAlu + "F";
        console.log("ID of idSelectedFlotF: " + idSelectedFlotF);

        idSelectedFlotL = idSelectedFlotAlu + "L";
        console.log("ID of idSelectedFlotL: " + idSelectedFlotL);

        idSelectedFlotEF = idSelectedFlotAlu + "EF";
        console.log("ID of idSelectedFlotEF: " + idSelectedFlotEF);

        valSelectedFlotAlu = $(idSelectedFlotAlu).prop('href');
        console.log("Value of valSelectedFlotAlu: " + valSelectedFlotAlu);

        valSelectedFlotM = $(idSelectedFlotM).text();
        console.log("Value of valSelectedFlotM: " + valSelectedFlotM);

        valSelectedFlotF = $(idSelectedFlotF).text();
        console.log("Value of valSelectedFlotF: " + valSelectedFlotF);

        valSelectedFlotL = $(idSelectedFlotL).text();
        console.log("Value of valSelectedFlotL: " + valSelectedFlotL);

        valSelectedFlotEF = $(idSelectedFlotEF).text();
        console.log("Value of valSelectedFlotEF: " + valSelectedFlotEF);

}

Answer 1

您可以使用.prev()来获取jquery中紧邻的前一个兄弟元素：

$(idSelectedFlotAlu).prev("a").text()

这是一个最小的片段：

var idSelectedFlotAlu = ''; //ID of Selected Student

function myFunction(idElemento) {
  idSelectedFlotAlu = "#" + idElemento;
  console.log($(idSelectedFlotAlu).prev("a").text())
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<table>
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <a href="#"> John Doe</a>
        <i class="fas fa-chart-pie" id="test1" onclick="myFunction(this.id)"></i></td>
    </tr>
  </tbody>
</table>

Updated fiddle

如何从jquery中的同级锚元素获取文本？

1 个答案: