javascript - 如何在javascript中获取 parent 的 child 的值(value)

Question

当我点击“下载”这个词时，我想获取一个标签的值，它是 bullet01.png

我搜索了 parent()->child(), siblings() 但它对我不起作用。

我需要使用 onclick 函数。因为 jquery 在我的代码中不起作用，但是当我在 onclick 内部使用时，它起作用了。

所以我是这样用的

onclick="downloadClick(fileList0)"

there is more tr tags and more td's id value

我用 javascript 制作了列表

我为window.onload设置了这个函数

function showOk() {
  $.ajax({
    url: 'http://localhost:8090/curriculum1.4/login_controller.jspx?cmd=fileList',
    type: 'get',
    dataType: 'json',
    success: function(resp) {

      var obj = JSON.parse(resp.file.result);

      var list4;
      var a4;
      var node;
      var element;

      for (i = 0; i < Object.keys(obj.univ).length; i++) {
      //  console.log(obj.univ[i].file);
        list4 = document.createElement("li");
        a4 = document.createElement("a");
        node = document.createTextNode(obj.univ[i].file);
        a4.setAttribute('href', obj.univ[i].file);
        list4.appendChild(a4);
        a4.appendChild(node);

                var num=i;
                var inte='fileList'+num;
                console.log(inte);

                element = document.getElementById(inte);
        element.appendChild(list4);

      }

    },
    error: function(xhr, status, error) {
      alert("오류입니다.");
    }
  });
}

js文件

function downloadClick(val) {
    var id = val;
    //var id= $(this +".selected li a").attr("href");
    console.log(id);
}

js的日志

这是一个简单的.html

    <table width="500" cellpadding="0" cellspacing="0" border="1" class="blueone">

        <tr>
          <td><input type="checkbox" id="a2" name="전체동의" /></td>
          <td id="fileList0" class="selected">
            <li>
              <a href="bullet01.png">bullet01.png</a>
            </li>
          </td>
          <td><a class="checkBtn" onclick="downloadClick(fileList0)">download</a></td>
        </tr>
  <tr>
      <td><input type="checkbox" id="a3" name="전체동의" /></td>
          <td id="fileList1">
                <li>
                  <a href="bullet011.png">bullet011.png</a>
                </li>
      </td>
      <td><a class="checkBtn" onclick="downloadClick()">다운로드</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" id="a4" name="전체동의" /></td>
      <td id="fileList2"></td>
      <td><a class="checkBtn" onclick="downloadClick()">다운로드</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" id="a5" name="전체동의" /></td>
      <td id="fileList3"></td>
      <td><a class="checkBtn" onclick="downloadClick()">다운로드</a></td>
    </tr>
      </table>

Answer 1

有多种方法可以实现此目的 - 一种选择是将保留的 event 对象添加到您的 downloadClick() 绑定(bind)和方法签名中:

HTML:

<a class="checkBtn" onclick="downloadClick(event, fileList0)">download</a>

Javascript

function downloadClick(event, val) { 

这样做可以让您轻松确定用户当前“从”点击的元素(即通过 event 对象 currentTarget 字段)。从那里，您通过 parentElement 和 querySelector(如下所述)遍历 DOM 以定位和提取您需要的 href 数据:

/*  
  Add event parameter to function, allowing us to 
  determine the current element being clicked 
*/
function downloadClick(event, val) {

  /*
  Traverse up the tree via parentElement field. I've
  broken this into steps for clarity
  */
  var a = event.currentTarget;
  var td = a.parentElement;
  var tr = td.parentElement;

  /*
  User querySelector with selector matching DOM to access 
  the anchor element with data that you want to extract
  */
  var id = tr.querySelector('td li a').getAttribute('href');

  console.log(id);
}

<table width="500" cellpadding="0" cellspacing="0" border="1" class="blueone">
  <tr>
    <td><input type="checkbox" id="a2" name="전체동의" /></td>
    <td id="fileList0" class="selected">
      <li>
        <a href="bullet01.png">bullet01.png</a>
      </li>
    </td>
    <!-- Add event parameter to call -->
    <td><a class="checkBtn" onclick="downloadClick(event, fileList0)">download</a></td>
  </tr>
</table>