如何在Jquery next方法中追加Html

Question

我有下面的HTML。

<td>
    <table class="position">
        <tbody>
            <tr class="position-numbers">
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>

        </tbody>
    </table>
</td>
<td class="select-technique">
    <select class="technique-class">

    </select>
</td>

<td class="select-technique">
    <select  class="technique-class">

    </select>
</td>
<td class="select-technique">
    <select class="technique-class">

    </select>
</td>

<script>
let cloneTech = jquery('td').closest('select');
findNext.html(`<h1>hello</h1>`);
</script>

当我点击td时，我需要查找下一步，选择并附加html。下一个().html()对此不起作用。

Answer 1

closest只在dom中向上工作，如果要查找嵌套在元素中的元素，则需要使用.find('select')。

这将返回一个元素内的所有元素，在本例中，您在td内只有一个，所以这对您来说应该是有效的。

这里也不应该使用.html()，因为这会设置innerHTML，如果要替换select，请使用.replace()，如果要在select之后插入，请使用.after()

let cloneTech = jquery('td').find('select');
findNext.after(`<h1>hello</h1>`);

Answer 2

如果您单击td并使用jquery，则可以执行下一步操作：

 $(".select-technique").on("click", function(){ 
     $(this).children("select").html(`<h1>hello</h1>`);
  })

或

  $(".select-technique").on("click", function(){ 
     $(this).find("select").html(`<h1>hello</h1>`);
  })

Answer 3

这将在您单击某个select之后将h1标记放在下一个td标记之前。

<script>
    $(document).ready(function () {
        $('td').click(function () { 
            $(this).next().find('select').prepend('<h1>hello</h1>');
        });
    });
</script>

此<select><h1>hello</h1></select>的html结果。如果希望在选择之外使用h1标记，请执行此操作

<script>
    $(document).ready(function () {
        $('td').click(function () { 
            $(this).next().find('select').before('<h1>hello</h1>');
        });
    });
</script>

此<h1>hello</h1><select></select>的html结果。