jQuery按屬性定位元素並替換它的HTML

Question

JS：

$('.translate').on('click', function(){

    $("*").each(function() {

        $.each(this.attributes, function() {            
            if (this.name.indexOf('uloc') == 0) {

                $(this).parent().html("HELLOOOOOOOO!");

                console.log(this.name + ' has the value: ' + this.value);
            }
        });
    });

});

HTML：

<ul>
    <li><a href="" uloc="report_problem">Report a problem</a></li>
    <li><a href="" uloc="privacy_policy">Privacy Policy</a></li>
    <li><a href="" uloc="terms_of_service">Terms of Service</a></li>
</ul>

<ul>
    <li><a class="translate" locale="fr">Français</a></li>
    <li><a class="translate" locale="en">English</a></li>
</ul>

因此，單擊時，找到的元素中的文本應替換為Hello。

我怎么能做到這一點？

Answer 1

你可以在一開始就使用一個簡單的屬性選擇器 ：

 $('.translate').on('click', function() { $("[uloc]").html("HELLOOOOOOOO!"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a href="" uloc="report_problem">Report a problem</a></li> <li><a href="" uloc="privacy_policy">Privacy Policy</a></li> <li><a href="" uloc="terms_of_service">Terms of Service</a></li> </ul> <ul> <li><a class="translate" locale="fr">Français</a></li> <li><a class="translate" locale="en">English</a></li> </ul> 

Answer 2

我們不需要使用屬性uloc迭代所有元素。 jQuery會為我們做。 最簡單的解決方案可以是 -

 $('.translate').on('click', function() { $("[uloc]").html("HELLOOOOOOOO!"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a href="" uloc="report_problem">Report a problem</a></li> <li><a href="" uloc="privacy_policy">Privacy Policy</a></li> <li><a href="" uloc="terms_of_service">Terms of Service</a></li> </ul> <ul> <li><a class="translate" locale="fr">Français</a></li> <li><a class="translate" locale="en">English</a></li> </ul> 

Answer 3

每個函數都有2個參數：索引和要迭代的元素。 您可以使用該元素來修改html。

https://api.jquery.com/each/

$('.translate').on('click', function(){
    $('[uloc]').each(function(index, element)  {
        $(element).html("HELLOOOOOOOO!");                       
    });
});

Answer 4

錯誤很簡單。 當你引用$(this).parent().html("HELLOOOOOOOO!"); ， this指向您正在迭代的屬性。 為了避免這種情況，您可以跟蹤外部循環中的元素，並在訪問父元素時使用它：

 $('.translate').on('click', function() { $("*").each(function() { // *** Remember the element, to be used later var element = this; $.each(this.attributes, function() { if (this.name.indexOf('uloc') == 0) { $(element).parent().html("HELLOOOOOOOO!"); console.log(this.name + ' has the value: ' + this.value); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li><a href="" uloc="report_problem">Report a problem</a></li> <li><a href="" uloc="privacy_policy">Privacy Policy</a></li> <li><a href="" uloc="terms_of_service">Terms of Service</a></li> </ul> <ul> <li><a class="translate" locale="fr">Français</a></li> <li><a class="translate " locale="en ">English</a></li> </ul> 

Answer 5

你可以使用jquery的屬性選擇器來查找具有屬性uloc所有元素並替換它的文本。 見下面的代碼

 $(function(){ $('.translate').on('click', function(){ $("[uloc]").each(function() { $(this).text("HELLOOOOOOOO!"); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a href="" uloc="report_problem">Report a problem</a></li> <li><a href="" uloc="privacy_policy">Privacy Policy</a></li> <li><a href="" uloc="terms_of_service">Terms of Service</a></li> </ul> <ul> <li><a class="translate" locale="fr">Français</a></li> <li><a class="translate" locale="en">English</a></li> </ul>