找到最近的父.classOne或.classTwo jquery

Question

我在同一页面中有两个不同的评论列表，第一个使用ul，第二个使用dl。

问题

点击button

时，我想为两个元素着色

我不想创建新变量。我想知道是否可能像：

  var Comment = $(document).find("[data-href='post?s=" + id_comment + "']").closest("li.comment || dd.listed_comment"); 

使用OR左右

＆＃13;

＆＃13;

$(document).on("click", 'button', function(){
var id_comment =$(this).data("id_comment");
var Comment = $(document).find("[data-href='post?s=" + id_comment + "']").closest("li.comment");	

Comment.css("background","red");
});

＆＃13;

li,dd{border:1px solid blue;margin:5px 0;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>


<ul class="comments">
 <li class="comment"><div data-href='post?s=16'>Comment</div></li>
 <li class="comment"><div data-href='post?s=25'>Comment</div></li>
 <li class="comment"><div data-href='post?s=26'>Comment</div></li>
</ul>

<dl class="listed_comments">
<dd class="listed_comment"><div data-href='post?s=25'>Comment</div></dd>
 <dd class="listed_comment"><div data-href='post?s=24'>Comment</div></dd>
</dl>

<button data-id_comment="25">Color red</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

jQuery允许使用CSS选择器。 CSS的一部分是使用多个选择器，用逗号分隔。这使您可以轻松选择其中一个。

＆＃13;

＆＃13;

$(document).on("click", 'button', function(){
var id_comment =$(this).data("id_comment");
var Comment = $(document).find("[data-href='post?s=" + id_comment + "']").closest("li.comment, dd.listed_comment");	

Comment.css("background","red");
});

＆＃13;

li,dd{border:1px solid blue;margin:5px 0;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>


<ul class="comments">
 <li class="comment"><div data-href='post?s=16'>Comment</div></li>
 <li class="comment"><div data-href='post?s=25'>Comment</div></li>
 <li class="comment"><div data-href='post?s=26'>Comment</div></li>
</ul>

<dl class="listed_comments">
<dd class="listed_comment"><div data-href='post?s=25'>Comment</div></dd>
 <dd class="listed_comment"><div data-href='post?s=24'>Comment</div></dd>
</dl>

<button data-id_comment="25">Color red</button>

＆＃13;

＆＃13;

＆＃13;

当然，最简单的方法是在两个元素中使用一个公共类（例如，＆＃34; comment-container＆＃34;）。

Answer 2

jQuery使用CSS样式选择器。请参阅下面的代码，我只是搜索任何匹配的元素，然后选择 - 并应用CSS - 到其父级。

＆＃13;

＆＃13;

$(document).on("click", 'button', function(){
	var id_comment =$(this).data("id_comment");
	$('div[data-href="post?s=' + id_comment + '"]').parent().css("background","red");
});

＆＃13;

li,dd{border:1px solid blue;margin:5px 0;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>


<ul class="comments">
 <li class="comment"><div data-href='post?s=16'>Comment</div></li>
 <li class="comment"><div data-href='post?s=25'>Comment</div></li>
 <li class="comment"><div data-href='post?s=26'>Comment</div></li>
</ul>

<dl class="listed_comments">
<dd class="listed_comment"><div data-href='post?s=25'>Comment</div></dd>
 <dd class="listed_comment"><div data-href='post?s=24'>Comment</div></dd>
</dl>

<button data-id_comment="25">Color red</button>

＆＃13;

＆＃13;

＆＃13;