Question

鉴于此标记：

<td>
   <a href="#">Item1</a> |
   <a href="#">Item2</a> |
   <a href="#">Item3</a> |
   <a href="#" class="refuseButton">Refuse</a>
   <div class="slideBox" style="display: none;">
        <div class="form-group">
             <div class="col-sm-12">
                   <input class="form-control" type="text" name="Description">
             </div>
        </div>
    </div>
</td>

当我点击Refuse链接时，我希望隐藏前面的元素及其内容（|）。我使用的是.prevAll()，但它删除的元素不是内容：

$('.refuseButton').on('click', function(event) {
    var button = $(event.relatedTarget);
    $(this).prevAll().slideToggle();
    $(this).next().slideToggle();
});

Answer 1

假设您无法更改标记（无论出于何种原因）。

您可以随时使用div包装textnodes，然后隐藏包装容器。

你不能直接操纵textnode，所以你必须在评论中使用Hacketo推荐的previousSibling来包装它。

$('.refuseButton').on('click', function(event) {
    var sibs = [];
    var sib = this.previousSibling;
    while (sib) {
        sibs.push(sib);
        sib = sib.previousSibling;
    }
    $(sibs).each(function() {
        $(this).wrap("div").hide();
    });
});

此：

整理当前节点之前的所有节点
将每个人包裹在一个div
隐藏div

首先是整理，因为包装然后应用.previousSibling将始终返回null，因为不再有任何兄弟姐妹。（还有其他方法可以执行此操作 - 例如将它们全部包装然后使用jquery .prevAll() - 或者仅使用此技术包装文本节点 - 或者只更改html（如果可能））。

显然这不会是幂等的，因为它动态地改变了html，但是有很多方法（例如只包装文本节点，然后在后续调用中不会有任何文本节点）。

修改：fiddle

Answer 2

用span填充所有项目行。运行代码段以查看结果

＆＃13;

        $(document).ready(function(){
            $('.refuseButton').on('click', function(event) {
                var button = $(event.relatedTarget);
                $(this).prevAll().slideToggle();
                $(this).next().slideToggle();
            });           
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <span><a href="#">Item1</a> |</span>
  <span><a href="#">Item2</a> |</span>
  <span><a href="#">Item3</a> |</span>
  <a href="#" class="refuseButton">Refuse</a>
  <div class="slideBox" style="display: none;">
    <div class="form-group">
      <div class="col-sm-12">
        <input class="form-control" type="text" name="Description">
      </div>
    </div>
  </div>            
</div>

＆＃13;

Answer 3

|字符（称为管道）位于a标记之外。就HTML而言，这只是纯文本。

您必须将它们移动到a标记中或将其全部包装在像div这样的容器中。

Answer 4

你真的无法改变HTML吗？然后变得困难，因为你不能使用DOM来到＆＃39; |＆＃39;管道符号。

以下工作通过删除

setMethod("names","markovchain", 
       function(x) {
        out <- x@states
        return(out)
      }
)

Answer 5

Jquery.grep（）解决方案怎么样：

$('.refuseButton').on('click', function(e) {
     $siblings=$($.grep($(e.target).parent().children('a'),function(item,index){
          return $(item).text() === '|'
}));
     $(siblings).remove() /*or $(siblings).text('') if you want to clear content*/
});

此外，您可以使用children('a:not(.refuseButton)')删除当前点击按钮

jQuery：删除包含内容的先前元素

5 个答案: