Question

这是我的代码：

＆＃13;

$('button').on('click', function(){
    $('div').after('<p>this element should be unique</p>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>this is a div</div>
<button>click</button>

＆＃13;

如您所见，当我多次点击<button>时，我会看到多个已创建的元素，如下所示：

<div>this is a div</div>
<p>this element should be unique</p>
<p>this element should be unique</p>
<p>this element should be unique</p>
<button>click</button>

但是我想<p> <div> <div>this is a div</div> <p>this element should be unique</p> <button>click</button>之后追加只有它不存在，否则我想替换它。无论如何我想要这个输出：（一次点击和多次点击）

#!perl 

use strict; 
use warnings; 

my $number = 5; 
print length($number), "\n";

我该怎么做？

Answer 1

在不知道如何生成<p>元素的情况下，您可以在此处查看一些通用解决方案，并implement您自己的逻辑

＆＃13;

var text;
$('#text').on('change', function() {
  text = $(this).val();

});
   $('button').on('click', function() {

  if ($('div').next('p:contains(' + text + ')').length) {

  } else {
    $('div').next('p').remove();
    $('div').after('<p>' + text + '</p>');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text">
<div>this is a div</div>
<button>click</button>

＆＃13;

Answer 2

您可以检查元素是否存在，以及是否确实更新了内容。这样的事情应该有效：

var index = 0;

$('button').on('click', function(){
index++;

    if($('#myWrapper').length == 0) {
        $('div').after('<p id="myWrapper">this element should be unique' + index +'</p>');
    } else {
        $('#myWrapper').html('<p>this element should be unique' + index +'</p>');
    }
});

JS小提琴示例：https://jsfiddle.net/igor_9000/44mgz316/3/

希望有所帮助！

Answer 3

如果你只有一个p

编辑

$('button').on('click', function() {
  if (!($('div').next('p').length)) {
    $('div').after('<p>this element should be unique</p>');
  }else{
    $('div').next('p').html('this will replace');
  }
});

Answer 4

最好添加一个包装器，只需替换它的内容：

＆＃13;

var $target = null;
$('button').on('click', function(){
  if(!$target) $target = $('<div></div>').insertAfter('div');
  $target.html('<p>this element should be unique</p>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>this is a div</div>
<button>click</button>

＆＃13;

如果元素存在，如何使用.after（）作为.html（）？

4 个答案: