CODEWITHSUNDEEP
javascriptjquery
Nikk
Nikk

Reputation: 7889

jQuery to locate an element by Attribute and Replace it's HTML

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>

So on click, the text in the found elements should be replaced with Hello.

How can I accomplish this?

Upvotes: 2

Views: 73

Answers (5)

PicTools
PicTools

Reputation: 49

The each function has 2 parameters: index and element that you are iterating. You can use that element to modify the html.

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

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

Upvotes: 2

Anki
Anki

Reputation: 417

We don't need to iterate over all elements with attribute uloc. jQuery will do it for us. The simplest solution can be-

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

Upvotes: 2

Sirko
Sirko

Reputation: 74036

You could a simple attribute selector in the first place:

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

Upvotes: 3

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

you can use attribute selector of jquery to find all elements having attribute uloc and replace it's text. see below code

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

Upvotes: 1

Nisarg Shah
Nisarg Shah

Reputation: 14541

The error is simple. When you refer to $(this).parent().html("HELLOOOOOOOO!");, this points to the attribute that you are iterating on. To avoid that, you can keep track of the element from outer loop and use that while accessing the parent element:

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

Upvotes: 1

Related Questions