javascript - 在单击嵌套元素时将类添加到同级

Question

我对 dom 操作有疑问。我想在单击 .fonts-container li 时将类添加到 .text 元素。

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

这是我的错误 JS：

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

Answer 1

使用最近的

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

Answer 2

您可以上树，直到.fonts-container通过 using到达.closest()，然后使用 找到兄弟节点.siblings()：

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

Answer 3

使用父母

$(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");
     }
});

Answer 4

使用父母

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