iT邦幫忙

0

javascript遍歷替換文字問題

各位先進好,簡單案例如下:

    <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

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

謝謝支援

6
froce
iT邦大師 1 級 ‧ 2021-02-03 05:48:44
最佳解答
$('.first .third').each(function(i){
  $(this).text(i);
})

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

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 檢舉

了解,謝謝

1
ccutmis
iT邦高手 4 級 ‧ 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

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

感謝提供解法與資訊~

1
japhenchen
iT邦大師 1 級 ‧ 2021-02-03 07:52:09

這樣參考一下

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

https://jsfiddle.net/45vxyruw/

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

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

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

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

2

可以用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);
});
leo226 iT邦新手 4 級 ‧ 2021-02-04 21:40:11 檢舉

謝謝提供解決方法~

我要發表回答

立即登入回答