![](/img/trans.png)
[英]How can I select a parent element, and all child divs that are not the first, as well as siblings of the parents and their children
[英]Parents / siblings / children: struggling to select relevant element
我正在創建一個博客,並嘗試使用JQuery切換編輯評論表單。
這是評論顯示部分的完整代碼:
<!--================== COMMENTS DISPLAY SECTION ====================================================================-->
<div id="comments">
<% blog.comments.forEach(function(comment){ %>
<div class="jumbotron comment">
<div class="row">
<div class="col-md-1">
<img class="comment-ico" src = "<%=comment.author.image%>">
</div>
<div class="col-md-7">
<h4><%=comment.author.username%></h4>
</div>
<div class="col-md-4 date">
<%= comment.created.toDateString()%>
</div>
</div>
</div>
<div><p><%=comment.text%></p></div>
<!--=================EDIT COMMENT FORM =========================================================================-->
<form class="edit-comment-form" action = "/blogs/<%= blog._id %>/comments" method = "POST" id="newComment">
<textarea class = "form-control" rows="4" placeholder = "Type comment here..." name = "comment[text]"></textarea>
<button class = "btn btn-lg btn-primary btn-block">Submit</button>
</form>
<!-- ==================================================================================================================-->
<!--=================COMMENT OPTIONS (visible if user = author) =====================================================-->
<% if(currentUser && currentUser.username == comment.author.username) { %>
<div class="row">
<div class="col-md-1 choice">
<a class="edit">Edit</a>
</div>
<div class="col-md-1">
<form id = "delete-form" action = "/blogs/<%= blog._id %>/comments/<%=comment._id%>?_method=DELETE" method = "POST">
<input type = "submit" class = "button-delete" value = "Delete"></form>
</div>
</div>
<% } %>
<hr class = "style-three">
<% }) %>
</div>
</div>
<!--====================================================================================================================-->
<!--======================ADD COMMENT FORM ================================================================================ -->
<% if(currentUser){ %>
<div class = "container form">
<form action = "/blogs/<%= blog._id %>/comments" method = "POST" id="newComment">
<div class="row">
<div class="col-md-2">
<img class="newComment-ico" src = "<%=currentUser.image%>">
</div>
<div class="col-md-10">
<label for="comment">Add comment</label>
</div>
</div>
<textarea class = "form-control" rows="4" placeholder = "Type comment here..." name = "comment[text]"></textarea>
<button class = "btn btn-lg btn-primary btn-block">Submit</button>
</form>
</div>
<% } %>
我的JS如下:
$('#comments').on('click', '.edit', function(){
$(this).parents().siblings('.edit-comment-form').toggle();
})
但是,這是選擇所有動態顯示的項目(注釋),因此當我單擊“ .edit”元素時,所有注釋都會顯示其編輯框。 我知道這與我如何根據父母/兄弟姐妹等選擇它們有關,但是無法弄清楚應該是什么!
@Satpal的評論非常完美,值得贊揚,盡管他的仁慈,但我將嘗試更深入地探討其邏輯:
$('#comments').on('click', '.edit', function() {
$(this).closest('.row').prev('.edit-comment-form').toggle();
});
由於.edit
是內部 .row
和.edit-comment-form
之前 ( .row
),基本上你正在影響以前 .edit-comment-form
最接近的.row
的點擊的.edit
。
對於簡單的單詞,最接近的行與單擊的編輯相同,並且將切換其先前的文本區域( .edit-comment-form
)。
find()
不起作用,因為它切換了嵌套在#comments
所有.edit-comment-form
。 var selected = $("#start"); selected.css("background", "gainsboro"); //prev() - Will select previous element disregarding tag name $(".prev").on('click', function() { selected = selected.prev(); $("div").css("background", ""); $("nav").css("background", ""); $("section").css("background", ""); $("span").css("background", "") selected.css("background", "gainsboro"); }); //closest() - Will highlight red only if selected element is a div $(".closest").on('click', function() { selected.closest('div').css("background", "red"); }); //find() - Will only highlight when span element is child $(".find").on('click', function() { selected.find('span').css("background", "red"); }); //Reset $(".reset").on('click', function() { $("div").css("background", ""); $("nav").css("background", ""); $("section").css("background", ""); $("span").css("background", ""); selected = $("#start"); selected.css("background", "gainsboro"); });
div { width: 40px; height: 40px; margin: 10px; float: left; border: 2px lightgray solid; padding: 2px; } .inline { float: left; margin: 10px; width: 48px; text-align: center; line-height: 48px; } #row { width: 100%; border: none; padding: 0; margin: 0; height: 60px; } section { width: 40px; height: 40px; margin: 10px; float: left; border: 2px lightgray solid; padding: 2px; } nav { width: 40px; height: 40px; margin: 10px; float: left; border: 2px lightgray solid; padding: 2px; } span { font-size: 14px; word-wrap: break-word; } button { margin: 10px; padding: 10px; background: transparent; border: 2px solid gray; border-radius: 3px; color: gray; font-size: 12px; } button:hover { background: gray; color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section id="row"> <div></div> <div class="find"></div> <span class="inline">span</span> <div><span>find() here</span></div> <section></section> <nav></nav> <div id="start"></div> </section> <button class="prev">test prev()</button> <button class="closest">test closest()</button> <button class="find">test find()</button> <button class="reset">reset</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.