只有在使用jquery检查后才在div之前添加元素

时间:2014-11-21 15:29:39

标签: javascript jquery html

我在点击按钮之前添加标签,如下所示:

$(".deletebutton").before("<label></label>");

其中.deletebuttondiv。但我发现通过多次点击可以添加多个标签。我想检查div之前是否存在标签。如果是的话,我不想添加另一个。

我的HTML结构是:

<li>
    <label></label>
    <div class="deletebutton"></div>
<li>

请建议

[更新]任何更好的解决方案? 这对我有用

if ($(".deletebutton").prev().get(0).tagName != 'LABEL') {
    $(".deletebutton").before("<label></label>");
} else {
    $(".deletebutton").prev().remove();
    $(".deletebutton").before("<label></label>");
}

如果我们想检查父母怎么办?

@silentw如果每次都添加一个div .deletebutton?

我使用了以下代码,但它无效:

var parentTag = $(".ruRemove").parent().get(0).tagName;

if (parentTag == 'LI') {
    $(".ruRemove").wrap("<div class='data deletebutton'></div>");
    $(".deletebutton").before("<label></label>");
} else {

    var par = $('.deletebutton').parent();
    if (par.is('div')) par.remove();
    $(".ruRemove").wrap("<div class='data deletebutton'></div>");

    var prev = $('.deletebutton').prev();
    if (prev.is('label')) prev.remove();
    $('.deletebutton').before("<label></label>");
}

<label> </label>
<div class="deletebutton">
    <label> </label>
    <div class="deletebutton">
        <label> </label>
        <div class="deletebutton">
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:6)

$(".deletebutton").on('click', function() {
    if(!$(this).prev().is('label')) $(this).before("<label>A</label>");
});

DEMO

更新

$(".deletebutton").on('click', function() {
    var prev = $(this).prev();
    if(prev.is('label')) prev.remove();
    $(this).before("<label>This is a label</label>");
});

DEMO 2