如何在javascript中获取父母的孩子的价值

Question

当我单击“下载”一词时，我想获取一个值为bullet01.png的标签的值

我搜索了同级兄弟的parent（）-> child（），但对我而言无效。

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

所以我这样使用

onclick =“ downloadClick（fileList0）”

  

有更多的tr标签和更多的td id值

我使用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()绑定和方法签名中：

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>

Answer 2

“因为jquery在我的代码中不起作用，但是当我在onclick中使用它时，它就起作用了。”

听起来您正在包含jquery，但是它不起作用。

那是因为您的DOM元素正在动态加载。您不能将事件绑定到元素之前。

但是，您可以将元素绑定到HTML的body，然后对元素进行过滤：

$("body").on("click", ".checkBtn", function(){
	var id = $(this).closest("tr").find(".selected li a").attr("href");
		
	console.log(id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">download</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" id="a2" name="전체동의" /></td>
      <td id="fileList0" class="selected">
        <li>
          <a href="bullet02.png">bullet02.png</a>
        </li>
      </td>
      <td><a class="checkBtn">download</a></td>
    </tr>
</table>

您不需要使用jQuery来执行此操作（如其他答案所指出的那样），但是，如果您已经加载了jQuery，则也可以使用它。 ：D

请注意，采用这种方法，您不需要HTML中的“ onclick”属性。

Answer 3

@DacreDenny的答案肯定是更可靠/灵活/更不易碎的 如果 ，您没有父元素的ID，因此我考虑将其完全删除，替换为一个普通的类，而不是实施他的解决方案。

但是...

如果您已经有了ID，那么从目标元素中遍历DOM是没有意义的，因为在文档中应该只有1个具有该ID的元素。如果有ID，那么您可以使用...

function downloadClick(id) {
    var parent  = document.getElementById(id);
        links = parent.querySelectorAll("li:nth-of-type(1) a:nth-of-type(1)"),
        firstHref = links[0].href;

    return firstHref;
}

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

    <tr>
      <td><input type="checkbox" id="a2" name="sino" /></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>
  </table>

@DacreDenny的解决方案可能会更有效，因为它仅以查询受限的DOM节点开始，但是我认为查询ID已得到相当优化。

无论哪种方式，您都应该注意，您的代码以及我见过的其他解决方案中还有另一个错误...

downloadClick(fileList0)

需要将其id名称作为字符串而不是JS变量...

downloadClick('fileList0')

Answer 4

获取ID为fileList0并有孩子a的元素，然后获取其textContent。

function downloadClick() {
    const value = document.querySelector('#fileList0 a').textContent;
    console.log(value);
}

<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>
</table>