如何使用jQuery在树形结构中添加子元素

11 浏览
0 Comments

如何使用jQuery在树形结构中添加子元素

我对Jquery和CSS/Html还比较新。我有一个CSS树结构，当外部按钮被点击时，我想要给父元素添加更多的子元素。你们能帮忙吗？

$(document).ready(function(){
    $('a').on('click',function(){
        $('a').not(this).removeClass('highlighted');
        $(this).toggleClass('highlighted');
        if ($('a').hasClass('highlighted')){
            $('.btn').prop('disabled', false); 
        }
        else {
            $('.btn').prop('disabled', true); 
        } 
    });
    $('.btn').click(function(){
        var new1 = "
  • AAA
    • ";
        $('.highlighted').children().append(new1);   
    });
});

    这是我写的代码。基本上，我会给我点击的'li'添加高亮效果，并尝试在当前'li'之后添加一个新的子'li'。

    0

    2 答案

    0 Comments

    在上述代码中，存在一个问题：无法将一个子元素添加到树形结构中。代码的主要功能是，当单击a元素时，将其背景颜色更改为黄色，并将其他a元素的背景颜色重置为默认值。如果至少有一个a元素被高亮显示，那么按钮将启用，否则按钮将被禁用。此外，当单击按钮时，应该在高亮显示的a元素中添加一个带有文本"AAA(children)"的li元素。

    然而，通过观察代码可以发现，添加子元素的功能并没有实现。在按钮的click事件处理程序中，使用append()方法尝试向高亮显示的元素中添加子元素。然而，这里的append()方法只是将新元素的字符串表示追加到目标元素的末尾，并不会实际创建新的元素。

    要解决这个问题，可以使用jQuery的createElement()方法来创建一个新的li元素，然后使用append()方法将其添加到高亮显示的a元素中。修改的代码如下所示：

    $(document).ready(function(){
  $('a').click(function(){
    $(this).toggleClass('highlighted');
    $('a').not(this).removeClass('highlighted');
    if($('a').hasClass('highlighted')) 
      $('.btn').prop('disabled',false);
    else
      $('.btn').prop('disabled',true);    
  })
  $('.btn').click(function(){
    var newLi = $('
  • AAA(children)
    • ');
    $('.highlighted').append(newLi);
  })
})

    通过这个修改，现在点击按钮时，将会在高亮显示的a元素中添加一个包含"AAA(children)"文本的li元素。

    0
    0 Comments

    在使用jQuery时，有时需要在树形结构中添加子元素。下面的代码演示了如何使用jQuery在树形结构中添加子元素：

    $('.btn').on('click', function(){
   var new1 = "
  • AAA
    • ";
   var new2 = $('.highlighted').append(new1);   
});

    以上代码通过点击按钮（class为`btn`）来触发事件。事件中定义了一个新的子元素`new1`，它是一个包含链接的列表项。然后使用`append()`方法将新的子元素添加到具有`highlighted`类的元素中。

    这种方式的出现是因为在某些情况下，我们需要在树形结构中动态地添加子元素。通过使用jQuery的`append()`方法，我们可以轻松地在指定的元素中添加子元素。

    希望这篇文章能帮助你理解如何使用jQuery在树形结构中添加子元素。

    0