Question

这是一段简短的代码：

var $el = $("#something").find(".test");
if (!$el.length) {
    $("#something").append('<div class="test">somecontent</div>');
} else {
    $el.replaceWith('<div class="test">somenewcontent</div>');
}

我找不到方法appendOrReplaceWith或类似的东西。

任何想法如何缩短它？

我相信：

$("#something").appendOrReplace('<div class="test">sometext</div>');

会更容易阅读，但还没有这样的方法。

Answer 1

强制性的香草回答。它可能不会更短，但速度更快。

获取元素，使用“test”类获取所有子元素，创建div，检查子元素长度，如果长度是真实的，则将innerHTML设置为div。否则，请附上它。

var el = document.getElementById("something");
var subel = el.getElementsByClassName("test");
var div = document.createElement("div");
div.className = "test"
if (subel.length) {
    div.textContent = "somenewcontent";
    while(el.hasChildNodes()) el.removeChild(el.lastChild); //remove child nodes
    el.appendChild(div);
} else { 
    div.textContent = "somecontent";
    el.appendChild(div);
}

Answer 2

我会这样做

var $s = $("#something"), $t = $s.find(".test"), c = 'New content';
( $t[0] ? $t:$s)[( $t[0] ? 'html':'append')](( $t[0] ? c :$('<div>',{class:'test'}).append(c)));

Answer 3

首先，您应该缓存选择器：

var $som = $('#something');
var $ele = $(".test",$som);
var newHtml = '<div class="test">somecontent</div>';

if (!$el[0]) $som.append( newHtml );
else         $ele.replaceWith( newHtml );

但是你已经做得很好了，（旁边没有缓存重复的选择器），而我试图让更小的可能因为没有使用{}而被踢了我的if和else：）

Answer 4

向jQuery添加findOrAppend之类的方法可能很有用：

$.fn.findOrAppend = function(selector, content) {
    var elements = this.find(selector);
    return elements.length ? elements : $(content).appendTo(this);
}

然后，您可以根据需要链接text，replaceWith，empty等。

$("#something")
    .findOrAppend(".test", "<div class='test'>")
    .text("newcontent");

Answer 5

先将其删除，然后追加。

$(".test").remove();
$("#something").append('<div class="test">somecontent</div>');

jQuery追加元素，如果它不存在，否则替换

5 个答案: