Javascript 从一个跨距到另一个跨距的遍历按钮

我刚开始学习jQuery和java脚本，目前我在显示隐藏按钮时遇到了一个问题，我的html是

<span style="float:left;padding-right:10px">
    <input type="button" value="image" class="delete" />
    <a href="/media/image"><img src="/media/image" /></a>
</span>
<span style="float: left; padding-top: 5px;">
    <a href="/media/image">
        <button  type="submit" class="delete_media">Delete</button>
    </a>
</span>

css:

我还试着使用find、nextAll、nextAll，但什么都不起作用，所以如何让它起作用

---

演示

您使用的是同级，但它们不在同一容器中。其他遍历函数也无法完成此任务，因为这两个按钮没有公共容器

只需按类别搜索即可

$(".delete").click(function(){         
   var $this = $(this);   
   $(".delete_media").toggle();             
});

你最好用一个普通的容器包装这两个按钮

这里有一个例子

<div data-action="delete">
    <span style="float:left;padding-right:10px">
        <input type="button" value="image" class="delete" />
        <a href="/media/image"><img src="/media/image" /></a>
    </span>
    <span style="float: left; padding-top: 5px;">
        <a href="/media/image">
            <button  type="submit" class="delete_media">Delete</button>
        </a>
    </span>
</div>

$(".delete").click(function(){         
   var $this = $(this);   
   $this.closest("div[data-action='delete']")
                          .find(".delete_media").toggle();             
});

$（“.delete”）。单击（函数（）{
var$this=$（this）；
$this.closest（“div[data action='delete']”）
.find（“.delete_media”）.toggle（）；
});

试试这个

 $this.closest('span').next().find(".delete_media").toggle();   

---

如果OP有多个元素，并且只想切换与“删除”按钮相关的元素，则此操作将失败。您也不使用此行

var$this=$（this）。没有通用容器。。。使用.parent（）和.next（）等的其他解决方案将与DOM@user2725407所以把它们放在一个普通的容器里。请参阅我的更新此功能与当前DOM结合使用。@user2725407当您稍微更改DOM时，它将停止工作。假设在这两个跨距之间添加一个图像，此解决方案将停止工作
<div data-action="delete">
    <span style="float:left;padding-right:10px">
        <input type="button" value="image" class="delete" />
        <a href="/media/image"><img src="/media/image" /></a>
    </span>
    <span style="float: left; padding-top: 5px;">
        <a href="/media/image">
            <button  type="submit" class="delete_media">Delete</button>
        </a>
    </span>
</div>

$(".delete").click(function(){         
   var $this = $(this);   
   $this.closest("div[data-action='delete']")
                          .find(".delete_media").toggle();             
});

 $this.closest('span').next().find(".delete_media").toggle();