1

以下の構文があります。$($(this).parent().siblings('div')[0])この部分は、再度使用する必要なく jQuery オブジェクトに直接アクセスすることで、よりエレガントに記述できるかどうか疑問に思ってい$();ました。

クラスが異なる場所でコードを再利用したいので、クラスを使用して使用.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>
4

7 に答える 7

4

試す

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

http://jsfiddle.net/rVfJ4/

于 2013-04-27T16:42:54.757 に答える
1

たぶん、このように

$('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 サードパーティ ライブラリを含めず、バニラ JavaScript を使用します。

于 2013-04-27T16:41:51.313 に答える
1

やり方は無限にありますが、

既成概念にとらわれずに考えることができます。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 ライブラリを作成できます。

于 2013-04-27T16:53:41.247 に答える