Question

<div class="box">
<span class="test"></span>
</div>
<div class="row"></div>
<input type="button" value="Add" id="button">

<style type="text/css">
    .box {
        display: none;
     }
</style>

页面加载时，上面的div

不可见。按钮点击后我们可以看到div。现在我想在div可见时附加文本。

$('#button').on("click",function(e){
   e.preventDefault();
   $('.box').clone().show().append('.row');
});

我试过这个

1) $(".box").closest(".test").text("hello");
2) $(".box").find(".test").text("hello");

但它没有将文字添加到span。

Answer 1

.closest遍历父元素。您需要使用.find()代替.closest()选择器来搜索子元素：

 $(".box .test").text("hello");

或

 $(".box").find(".test").text("hello");

<强> Working Demo

Answer 2

您需要find()选择visible代替closest()。

closest()在选择器的父级中查找具有给定类的元素，而find查看选择器的子级

$(".box:visible").find(".test").text("hello");

这就是，它没有添加，因为在你的div可见之前你的find语句被执行了。在div显示后，您需要执行添加文本语句，它将如下面的代码段所示工作

$(function(){
      $('#toggle').click(function(){
       console.log('click');
        $('.box').css("display", "block");
        $('.box').find('.test').text("Hello");
      })
      
    
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="box">
    
    <span class="test"></span>
    
    </div>
    <button id="toggle">toggle</button>

Answer 3

试试这个：

$(document).ready(function(){

     $("button").on("click",function(){

         $(".box").find(".test").text("hello");

         $(".box").show(500);

     })

 })

最终代码：

<!DOCTYPE html>
<html lang="en">
<head>
    
    <style type="text/css">
        .box {
            display: none;
         }
    </style>
    
</head>
    <body>
        
        <div class="box">
            <span class="test"></span>
        </div>
        <div class="row"></div>
        
        <button>SHOW DIV</button>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            
        $(document).ready(function(){

             $("button").on("click",function(){

                 $(".box").find(".test").text("hello");

                 $(".box").show(500);

             })

         })
 
        </script>
    </body>
</html>

Answer 4

您需要使用.find() / .children() / Descendant Selector (“ancestor descendant”)来定位test元素。

此外，您需要使用.appendTo()代替.append()

.append()和.appendTo()方法执行相同的任务。主要区别在于语法特定，内容和目标的放置。

jQuery(function($) {
  $(".box:first")
    .clone()
    .find(".test")
    .text("hello")
    .end()
    .show()
    .appendTo('.row');
});

.box {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box">
  <span class="test"></span>
</div>
<div class="row"></div>

当div可见时，jQuery添加文本以跨越

4 个答案: