javascript遍歷替換文字問題

javascript jquery foreach

leo226 2021-02-03 01:17:05 ‧ 2124 瀏覽

各位先進好，簡單案例如下：

    <div class="first">
        <div class="second">
            <div class="third">小王</div>
        </div>
    </div>

    <div class="first">
        <div class="second">
            <div class="third">bsl</div>
        </div>
    </div>

$('.first').each(function(i){
  $('.first .third').text(i);
})

需求：
由於class名稱一樣(由元件產生，不是自己建構的class)，透過jquery取得物件後用each遍歷，並取得想要的位置改變文字內容

以上程式碼預期結果：

0
1

實際結果：

1
1

請問有什麼好方法可以達成想要的結果嗎？

謝謝支援

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

4 個回答

froce

iT邦大師 1 級 ‧ 2021-02-03 05:48:44

最佳解答

$('.first .third').each(function(i){
  $(this).text(i);
})

你原本的寫法每次都會抓所有的[.first .third]去改

回應 3
分享
檢舉

leo226 iT邦新手 4 級 ‧ 2021-02-04 21:39:43 檢舉

    $('.first').each(function(i) {
        $('.third').text(i);
    });

請問為什麼這樣寫也不行，沒用this的話，它就是從最外層抓全部.third，然後一起改掉的意思嗎？
我以為each就會先跑第一組.first，然後抓裡面的.third，第二廻圈再跑第二組。

froce iT邦大師 1 級 ‧ 2021-02-04 22:09:07 檢舉

.third就是抓整個html裡class是third的元素。
你要像你說的那樣遍歷的話就是上面的:

$(".first").each(function(i) {
    $(this).find('.third').text(i);
});

但實際上沒必要，正確的寫選擇子很重要。

leo226 iT邦新手 4 級 ‧ 2021-02-05 21:31:49 檢舉

了解，謝謝

登入發表回應

ccutmis

iT邦高手 2 級 ‧ 2021-02-03 03:40:22

土法煉鋼的範例提供您參考:

$(".first").each(function(i) {
    $(this).find('.third').text(i);
});

補充一個類似的範例:

$.each($('.first'), function(i){
      $(this).find('.third').text(i);      
});

上列兩個範例在這邊會得到同樣的結果，不過$(selector).each() 跟 $.each() 有一些小差異，可以參考下列網頁說明:
https://www.itread01.com/articles/1475842321.html

回應 1
分享
檢舉

leo226 iT邦新手 4 級 ‧ 2021-02-04 21:36:52 檢舉

感謝提供解法與資訊～

登入發表回應

japhenchen

iT邦超人 1 級 ‧ 2021-02-03 07:52:09

這樣參考一下

	$('.first .third').each(function(i){
        $(this).text(i);
	})

https://jsfiddle.net/45vxyruw/

回應 3
分享
檢舉

japhenchen iT邦超人 1 級 ‧ 2021-02-03 07:54:06 檢舉

.........捲上去才發現已有相同的答案..(拜託正解一定要給froce)

froce iT邦大師 1 級 ‧ 2021-02-03 09:11:45 檢舉

我沒差啦，讓我賺到足夠閒聊的權限就夠了。XD

japhenchen iT邦超人 1 級 ‧ 2021-02-03 09:38:50 檢舉

我都先回文也沒看已有的回應......按下去才發現......英熊所見，略同略同..

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2021-02-03 10:04:46

可以用eq來指定要改第幾個元件。
如

$(".first").eq(0).find(".third").text("要改的文字");

如果有對應資料可供替換。如以下的處理方式

var data = ["一","二","三"];

$(".first").each(function(i,v){
    var str = data[i] ? data[i] : $(this).find(".third").text();
    $(this).find(".third").text(str);
});