Question

我的HTML看起来像这样：

<div class="panel">
    <div class="panel-heading"></div>
    <div class="panel-body"></div>
</div>

我目前正在选择panel-heading元素的父节点，如下所示：

e.target.parentNode

这让我留下panel课程。一切都很好。

但现在我想抓住panel-body。不幸的是，做这样的事情是行不通的：

e.target.parentNode.querySelector('.panel-body')

在vanilla javascript中有没有一种干净的方法呢？

Answer 1

如果您知道节点的类，则可以始终使用document对象：

var tgt = document.querySelector('.panel-body');

如果您需要在诸如click之类的事件的上下文中获取节点，则可以委派。

查找作为您要访问的所有节点的祖先的节点。

离。 .panel



在该节点上注册活动。

离。 panel.addEventListener('click', callback)



在冒泡阶段，通过将event.target与event.currentTarget（注册到事件的节点）进行比较来查找if(e.target !== e.currentTarget) {...

离。 // Reference top element var panel = document.querySelector('.panel'); // Register .panel on click event panel.addEventListener('click', highlight); function highlight(e) { // if the clicked node is not .panel if (e.target !== e.currentTarget) { // Get the clicked node's class var tgtClass = e.target.className; // Get the clicked node's tag var tgtTag = e.target.tagName; } /* Set the clicked node's tag and class || as it's content. */ e.target.textContent += ' ' + tgtTag + '.' + tgtClass; }

单击节点，将显示它的标签和类。 详细信息在代码段

中进行了评论

段

[class*=panel] {
  border: 1px dashed blue;
  color: red;
}

<section class="panel">
  <hgroup class='panel-heading-group'>
    <h1 class="panel-heading">HEADING</h1>
    <h2 class='panel-sub-heading'>SUB-HEADING</h2>
  </hgroup>
  <main class="panel-body">
    <p>CONTENT A</p>
    <p>CONTENT B</p>
  </main>
  <footer class='panel-footer'>FOOTER</footer>
</section>

#ifndef HILOS_H // this was missing! Probably when you did copy paste to question
#define HILOS_H

#include <QMainWindow>
// remove line: #include "mainwindow.h"
#include <QThread>
#include <QtCore>
// remove line: #include "ui_mainwindow.h"

// forward declaration
class MainWindow;

class HiloPrincipal : public QThread
{
    Q_OBJECT

public:

   explicit HiloPrincipal( MainWindow* parent = 0); // First error


   MainWindow * _parent; // Second error

   void run(); // Sacar Botella y poner botella.


signals:

public slots:

};
#endif // HILOS_H

链接vanilla javascript遍历？

1 个答案:

段