Javascript 单击嵌套元素将类添加到同级

我对dom操作有问题。我想将类添加到.text元素，单击.font容器li

<div class="editor">
    <h2 class="text">Heading</h2>
    <div class="ui-resizable-handle"></div>
    <div class="ui-resizable-handle"></div>
    <div class="ui-resizable-handle"></div>
    <img class="icon-layer-up2" >
    <img class="icon-layer-down2">
    <img class="icon-trash2">
    <i class="icon-move"></i>
    <i class="font2"></i>
    <div class="fonts-container">
        <ul>
            <li data-fontname="Aclonica">Aclonica</li>
            <li data-fontname="Acme">Acme</li>
            <li data-fontname="Alegreya">Alegreya</li>
        </ul>
    </div>
</div>

使用

利用父母

$(document).on('click', '.fonts-container ul li', function(){
     if ( $('.font2').hasClass("active")) {alert('a');
      var fontName = $(this).data("fontname");
      $(this).parents(".editor").find('.text').addClass("fontset");
     }
});

$('li'.'.fonts-container').on('click', function(){
 if ( $('.font2').hasClass("active")) {
  var fontName = $(this).data("fontname");
  $(this).parents(".editor").find('.text').addClass("fontset");
 }
});

利用父母

$(document).on('click', '.fonts-container ul li', function(){
     if ( $('.font2').hasClass("active")) {alert('a');
      var fontName = $(this).data("fontname");
      $(this).parents(".editor").find('.text').addClass("fontset");
     }
});

$('li'.'.fonts-container').on('click', function(){
 if ( $('.font2').hasClass("active")) {
  var fontName = $(this).data("fontname");
  $(this).parents(".editor").find('.text').addClass("fontset");
 }
});

---

通过使用，您可以沿着树向上移动，直到到达

.font container

，然后使用以下命令查找同级节点：

---

你只寻找一位家长，而不是所有可能的家长。你只寻找一位家长，而不是所有可能的家长。

$(this).closest('.fonts-container').siblings('.text')