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

使用closest

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

您可以使用.closest()向上到达.fonts-container，然后使用.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");
 }
});

在点击嵌套元素时将类添加到兄弟节点

4 个答案: