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

You can go up the tree until you reach .fonts-container by using .closest() and then find the sibling node using .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");
     }
});