如何改善jQuery代碼

Question

我有下面的語法。 我想知道是否可以通過直接訪問jQuery對象而不使用$();來更優雅地編寫$($(this).parent().siblings('div')[0])這個部分$(); 再次。

我使用了.parent().siblings ，沒有使用div類，因為我想在類不同的地方重用代碼。

$('textarea').click(function(){
     $($(this).parent().siblings('div')[0]).html('<span>140</span>');
     $($(this).parent().siblings('div')[1]).html('<span>Reply</span>');
});

<div class="post_area2">
    <div class="wrap_area2 left">
        <textarea></textarea> 
    </div>
    <div class="word_c left"></div>
    <div class="submit left"></div>   
</div>

Answer 1

您可以使用.eq()方法。

$('textarea').click(function(){
     $(this).parent().siblings('div')
                     .eq(0).html('<span>140</span>').end()
                     .eq(1).html('<span>Reply</span>');
});

Answer 2

嘗試

$('textarea').click(function(){
     $(this).parent().next().html('<span>140</span>')
      .next().html('<span>Reply</span>');
});

http://jsfiddle.net/rVfJ4/

Answer 3

我同意甜淀粉酶的回答。 該代碼應該工作。 因為它使用本地javascript，所以我認為它對性能有好處。

或使用類名來確定div：

$('textarea').click(function(){
    var parentDiv = $(this).parents('div.post_area2'); // avoid to use $(this) multi time in this function
    parentDiv.find('div.word_c').html('<span>140</span>');
    parentDiv.find('div.submit').html('<span>Reply</span>');
});

即使您添加新的另一個div也可以正常工作。

如果您有其他解決方案，請不要使用“ eq（）”。

抱歉，我沒有足夠的聲譽投票。

Answer 4

我會這樣重寫它：

$('textarea').click(function(){
     var divContainer = $(this).parent().siblings('div');
     divContainer[0].innerHTML = '<span>140</span>';
     divContainer[1].innerHTML = '<span>Reply</span>';
});

您可以使用本機屬性innerHTML設置DOM元素的內容，等效於使用.html()減去調用jQuery對象的要求。

另外，這取決於您的編碼風格是否喜歡進行鏈接，因為使用jQuery確實很容易做到，但是當行變長時可能很難閱讀。

Answer 5

也許像這樣

$('textarea').click(function () {
    var parentSiblings = $(this).parent().siblings('div');

    $(parentSiblings[0]).html('<span>140</span>');
    $(parentSiblings[1]).html('<span>Reply</span>');
});

要么

$('textarea').click(function () {
    var parentSiblings = $($(this).parent().siblings('div'));

    parentSiblings.eq(0).html('<span>140</span>');
    parentSiblings.eq(1).html('<span>Reply</span>');
});

其他人可能會看到使用香草javascript更加優雅。

function empty(element) {
    "use strict";

    while (element.hasChildNodes()) {
        element.removeChild(element.lastChild);
    }
}

function addEvent(nodeList, type, callBack) {
    "use strict";

    var length = nodeList.length,
        i = 0;

    while (i < length) {
        nodeList[i].addEventListener(type, callBack, false);
        i += 1;
    }
}

addEvent(document.getElementsByTagName("textarea"), "click", function (evt) {
    "use strict";

    var divContainer = evt.target.parentNode.parentNode.getElementsByTagName("div"),
        span;

    empty(divContainer[1]);
    span = document.createElement("span");
    span.textContent = "140";
    divContainer[1].appendChild(span);

    empty(divContainer[2]);
    span = document.createElement("span");
    span.textContent = "Reply";
    divContainer[2].appendChild(span);
});

這些和其他在jsfiddle上可用

我想這取決於您如何定義更優雅。 有時可讀性更重要，也許不包括ant 3rd第三方庫和使用普通javascript。

Answer 6

您應該給其他div額外的類以表示它們的含義。

$('textarea').click(function(){
     $(this).parents('form').children('.hide-until-using-form').show();
});

這將創建一個高度可重用的功能，該功能不依賴於涉及到的同級兄弟，按鈕的文本是什么（發布？編輯？）等等。

Answer 7

有無數種方法可以做到，

您可以想一下，我不確定最新版本的jquery是否可以優化對元素的訪問，如果我錯了，請隨時對我感到抱歉。

但是，有幾種方法可以做到這一點：

var parentSelector = $(this).parent().parent();
var parentSelector = $(this).parents('#uniqueId');

var currentId = this.id;
var childrenSelector = parentSelector.children('div[id!="' + currentId + '"'];

var one = $(childrenSelector.get(0));
var two = $(childrenSelector.get(1));

優化元素訪問的一種簡單方法是包裝/創建保存對DOM元素的引用的新函數，需要考慮一些問題，但是您可以創建一個不錯的dom-cache庫。