我有以下语法。我想知道是否可以通过直接访问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>
答案 0 :(得分:8)
您可以使用.eq()
方法。
$('textarea').click(function(){
$(this).parent().siblings('div')
.eq(0).html('<span>140</span>').end()
.eq(1).html('<span>Reply</span>');
});
答案 1 :(得分:4)
尝试
$('textarea').click(function(){
$(this).parent().next().html('<span>140</span>')
.next().html('<span>Reply</span>');
});
答案 2 :(得分:2)
我同意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()'。
对不起,我投票的声誉不够。
答案 3 :(得分:1)
我会重写它:
$('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完成,但是当行变长时很难阅读。
答案 4 :(得分: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第三方库和使用vanilla javascript。
答案 5 :(得分:1)
您应该给其他div
个额外的类来表示它们的含义。
$('textarea').click(function(){
$(this).parents('form').children('.hide-until-using-form').show();
});
这创建了一个高度可重用的函数,它不依赖于涉及多少兄弟,按钮的文本是什么(Post?Edit?)等。
答案 6 :(得分: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库。