如何改进jQuery代码

How to improve jQuery code

本文关键字：代码 jQuery 何改进      更新时间：2023-09-26

语法如下:我想知道这部分:$($(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>

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

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

Try

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

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

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

我会这样重写:

$('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很容易做到这一点，但当行变长时，可能很难阅读。

您应该给其他div额外的类来表示它们的含义。

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

这创建了一个高度可重用的函数，它不依赖于涉及多少兄弟姐妹，按钮的文本是什么(Post?编辑?)等。

有无数种方法，

你可以想想有点跳出框框，我不确定最新版本的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缓存库。

也许像这样

$('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

上可以找到这些和其他的

我想这取决于你如何定义更优雅。有时可读性更重要，也许不包括第三方库和使用普通javascript。

相关文章：