jQuery如何实现为含Test 2的p标签对应View按钮右侧追加新按钮

• 选择器逻辑错误：find() 方法仅能查找当前元素的后代子节点，你的HTML结构中，class为view的按钮是<p>标签的相邻兄弟节点，并非嵌套在<p>标签内部，因此find('.view')无法匹配到目标元素。
• 插入方法不符合需求：append()会将内容插入到目标元素的内部末尾，你需要的是在目标按钮的同级后方追加新元素，应该使用after()方法。

JS代码 #

jQuery(document).ready(function($) {
    $('.btn-click').click(function() {
        // 匹配含Test 2的p标签，取它下一个class为view的兄弟节点，之后插入新按钮
        $("p:contains('Test 2')").next('.view').after('<button>View-2</button>');
    });
});

原有HTML代码无需修改 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn-click">Click Me</button>
<p>Test 1</p> <button class="view">View</button>
<p>Test 2</p> <button class="view">View</button>
<p>Test 3</p> <button class="view">View</button>

如果<p>标签和对应的view按钮之间可能存在其他节点，可将next('.view')替换为nextAll('.view').first()，能更稳定匹配到对应按钮。

内容的提问来源于stack exchange，提问作者JFeel