Question

简化：

我有一个HTML结构：

 <!-- remark  data-foo="5" -->

  <div>
     <div>
        <div>
            <input class='btn' value='click me' type='button'/>
       </div>
     </div>
  </div>

   <!-- remark  data-foo="6" -->

  <div>
        <div>
            <input class='btn' value='click me' type='button'/>
       </div>
  </div>

单击按钮时如何访问最接近的注释元素？

换句话说：

当用户单击第一个按钮时，代码应访问第一个备注元素。

当用户单击第二个按钮时，代码应访问第二个备注元素。

当然，可以很容易地通过closest / parents访问访问父级。但这只会提供父母。我需要访问父级上级兄弟。

JSBIN

Answer 1

这应该可以满足您的需求

$(".btn").on('click',function (){

  var element = this;
  var comment = null;
  while(element) {
    comment = document.evaluate("./preceding-sibling::comment()", element).iterateNext();
    if(comment) {
      break;
    }
    element = element.parentNode;
  }
  if(comment) {
    alert(comment.textContent);
  } else {
    alert("No comment found");
  }

});

它适用于任意深度，并且始终选择元素上方最近的注释节点。

编辑：使用jQuery .contents()而不是document.evaluate()的相同解决方案：

$(".btn").on('click',function (){

  var element = this;
  var comment = null;
  while(element && element.parentNode) {
    var children = $(element.parentNode).contents();
    for(var i = children.index(element) - 1; i >= 0; i--) {
      if(children[i].nodeType === 8) {
        comment = children[i];
        break;
      }
    }
    if(comment) {
      break;
    }
    element = element.parentNode;
  }
  if(comment) {
    alert(comment.textContent);
  } else {
    alert("No comment found");
  }

});

获取jQuery中最接近的注释节点？

1 个答案: