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

8

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

$('textarea').click(function(){
     $(this).parent().siblings('div')
                     .eq(0).html('<span>140</span>').end()
                     .eq(1).html('<span>Reply</span>');
});
于 2013-04-27T16:37:52.020 回答
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 回答
2

我同意甜淀粉酶的回答。该代码应该可以工作。因为它使用的是原生 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()'。

对不起，我没有足够的投票声望。

于 2013-04-27T17:07:04.890 回答
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 回答
1

我会这样重写它：

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

可以使用native 属性innerHTML来设置DOM 元素的内容，相当于使用.html()减去调用jQuery 对象的要求。

此外，这取决于您的编码风格是否喜欢进行链接，因为使用 jQuery 很容易做到这一点，但是当行变长时可能难以阅读。

于 2013-04-27T16:38:48.817 回答
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>');
});

其他人可能会看到使用 vanilla 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 方库和使用 vanilla javascript。

于 2013-04-27T16:41:51.313 回答
1

你应该给其他div人额外的类来代表他们的意思。

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

这创建了一个高度可重用的函数，它不依赖于涉及多少兄弟，按钮的文本是什么（发布？编辑？）等。

于 2013-04-27T16:45:48.213 回答