Question

我在div（嵌套div）和button点击以及一个textarea内有div，当我点击此按钮时，我希望在文本中输出div，将文字添加到Textarea

例如

<div id="container">
<div class="nested"> 
 <div id="1">
   <div class="nested">
     <div id="3">helpX</div>
     <div id="4">helpY</div>
   </div>
 </div>
 <div id="2">helpZ</div>
</div> 
</div>

当我点击我的按钮时，我需要像这样的输出=嵌套（=嵌套（helpX）（helpY））（helpZ）

我的代码是：

     $('#BUTTONCLICK').click(function(){
       $('#container').find("div").each( function(index) {
       ....
       }); 
     });

我希望你能帮助我。谢谢。

Answer 1

尝试

$('#BUTTONCLICK').click(function(){
 var text = '';
 $('#container').find("div").each( function(index) {
     text += $(this).text();
 }); 
 $("textarea").val(text);
});

Answer 2

您必须设置一些条件来检查孩子是nested或孩子是否有nested个孩子，还是简单的div。所以我使用递归函数来处理它：

$('#BUTTONCLICK').click(function(){
  var findNest = function(ele) {
    
    // To see if current item needs a nested prefix
    var result = $(ele).hasClass("nested") ? '=nested(' : '';
    
    $(ele).find(' > div').each(function(idx, item) {
        var $item = $(item);
        if ($item.hasClass("nested")) {
             // If current cheked item is a nested item, nested it.
            result += findNest($item);
        } else if ($(item).find(".nested").length > 0) {
            result += findNest(item);
        }  else {
            // Current check item is a simple div, add it
            result += '(' + $(item).text() + ')';
        }
    });
    
    // Decide tail
    var tail = $(ele).hasClass("nested") ? ')' : '';
    return result + tail;
  };
     var $container = $('#container');
     var result = findNest($container);

   console.log(result);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="container">
        <div class="nested"> 
             <div id="1">
                   <div class="nested">
                     <div id="3">helpX</div>
                     <div id="4">helpY</div>
                   </div>
             </div>
             <div id="2">helpZ</div>
        </div> 
</div>
<div id="BUTTONCLICK">click</div>

如果您想提供级别限制，可以将代码更改为：

$('#BUTTONCLICK').click(function(){
  // Inits
  var LEVEL_LIMIT = 2;
  var currentLevel = 0;
  var findNest = function(ele) {
    // Add one level at start.
    ++currentLevel;
    // To see if current item needs a nested prefix
    var result = $(ele).hasClass("nested") ? '=nested(' : '';

    $(ele).find(' > div').each(function(idx, item) {
        var $item = $(item);
        var $nestChilds = $(item).find(".nested");
        if (currentLevel <= LEVEL_LIMIT &&
            ($item.hasClass("nested") || $nestChilds.length > 0)) {
            // If current cheked item is a nested item, or it has child that is nest, go into it.
            result += findNest($item);
        }  else {
            // Current check item is a simple div or level limit reached, 
            // simply add div texts...(May need other process of text now.)
            result += '(' + $(item).text() + ')';
        }
    });

    // Decrease Level by one before return.
    --currentLevel;

    // Decide tail
    var tail = $(ele).hasClass("nested") ? ')' : '';
    return result + tail;
  };
     var $container = $('#container');
     var result = findNest($container);

   console.log(result);
 });

Answer 3

 $('#BUTTONCLICK').click(function(){
  var findNest = function(ele) {
    
    // To see if current item needs a nested prefix
    var result = $(ele).hasClass("nested") ? '=nested(' : '';
    
    $(ele).find(' > div').each(function(idx, item) {
        var $item = $(item);
        if ($item.hasClass("nested")) {
             // If current cheked item is a nested item, nested it.
            result += findNest($item);
        } else if ($(item).find(".nested").length > 0) {
            // For all .nested child from the item, do the findNest action
            $(item).find(".nested").each(function(idx, item) {
              result += findNest(item);
          });
        }  else {
            // Current check item is a simple div, add it
            result += '(' + $(item).text() + ')';
        }
    });
    
    // Decide tail
    var tail = $(ele).hasClass("nested") ? ')' : '';
    return result + tail;
  };
     var $container = $('#container');
     var result = findNest($container);

   console.log(result);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="container">
        <div class="nested"> 
             <div id="1">
                   <div class="nested">
                     <div id="3">helpX</div>
                     <div id="4">helpY</div>
                   </div>
             </div>
             <div id="2">helpZ</div>
        </div> 
</div>
<div id="BUTTONCLICK">click</div>

如何使用jquery在嵌套div中创建输出文本

3 个答案: