如何找到當前元素的下一個元素？

Question

嗨，我想將文本設置為當前元素旁邊的跨度。

<input type="text" class="myText" />
<span class="text-danger"></span>

<input type="text" class="myText" />
<span class="text-danger"></span>

<script>
    $(".myText").each(function(){
         $(this).siblings("span").eq(0).text("someText");   
    })
</script>

我想在輸入（span）旁邊看到該文本。 但它不起作用。

Answer 1

我認為這可以做你想要的，因為不需要使用兄弟姐妹和eq

<script>
    $(".myText").each(function(){
         $(this).next("span.text-danger").text("someText");   
    })
</script>

Answer 2

您可以使用nextElementSibling

 $('.myText').on('input',function(){ this.nextElementSibling.innerHTML = this.value }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="myText" /> <span class="text-danger"></span> <input type="text" class="myText" /> <span class="text-danger"></span> 

Answer 3

要選擇下一個元素，請使用next（）函數，例如，如果要在span中寫入輸入值，則可以使用以下函數：

1. 每次按下按鈕時執行代碼的keyup（）： https ： //www.w3schools.com/jquery/event_keyup.asp
2. next（）選擇輸入標記的下一個元素https://www.w3schools.com/jquery/traversing_next.asp
3. val（）獲取輸入值https://www.w3schools.com/jquery/html_val.asp

所以你的最終代碼應該是這樣的：

  <script data-require="jquery" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script> <input type="text" class="myText" /> <span class="text-danger"></span> <input type="text" class="myText" /> <span class="text-danger"></span> <script> $(".myText").keyup(function(){ $(this).next().text($(this).val()); }); </script> 

Answer 4

根本不需要循環，jquery有一個.next()選擇器，所以只需$(".myText").next().text("someText"); 會做的。

 $(".myText").next().text("someText"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="myText" /> <span class="text-danger"></span> <input type="text" class="myText" /> <span class="text-danger"></span> 

你有什么理由需要首先選擇.myText元素然后找到下一個元素嗎？ 您可以直接選擇$('.text-danger')