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

首先您可以使用简单的attribute selector：

$('.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>

jQuery通过属性查找元素并替换其HTML

5 个答案: