CODEWITHSUNDEEP
jqueryhtml
damien marchand
damien marchand

Reputation: 864

Jquery : edit list of href

I have got a list of links and I want to edit all href of this list. Exemple :

<a class="repo-avatar-link" href="/damienmarchand/sqdsdqsdsfds">

I want :

<a class="repo-avatar-link" href="http://something/damienmarchand/sqdsdqsdsfds">

My page : 

<ul class="repository-list" data-current-status="all">
  
    
    <li class="iterable-item">
      <span class="aui-avatar aui-avatar-medium aui-avatar-project repo-avatar">
        <span class="aui-avatar-inner">
          <a class="repo-avatar-link" href="/damienmarchand/sqdsdqsdsfds">
            <img src="https://d3oaxc4q5k2d6q.cloudfront.net/m/5fe8c0346b2d/img/language-avatars/default_32.png" alt="" data-modules="utils/retina">
          </a>
        </span>
      </span>
      <span class="repo-name">
        <a class="execute" href="/damienmarchand/sqdsdqsdsfds">sqdsdqsdsfds</a>
        
      </span>
      <span class="last-updated">
        
          Updated <time datetime="2014-11-07T23:25:52.716869+00:00">2014-11-07</time>
        
      </span>
    </li>
  
    
    <li class="iterable-item">
      <span class="aui-avatar aui-avatar-medium aui-avatar-project repo-avatar">
        <span class="aui-avatar-inner">
          <a class="repo-avatar-link" href="/damienmarchand/sdqdsd">
            <img src="https://d3oaxc4q5k2d6q.cloudfront.net/m/5fe8c0346b2d/img/language-avatars/java_32.png" alt="" data-modules="utils/retina">
          </a>
        </span>
      </span>
      <span class="repo-name">
        <a class="execute" href="/damienmarchand/sdqdsd">sdqdsd</a>
        
      </span>
      <span class="last-updated">
        
          Updated <time datetime="2014-11-07T23:25:21.619545+00:00">2014-11-07</time>
        
      </span>
    </li>
  
    
    <li class="iterable-item">
      <span class="aui-avatar aui-avatar-medium aui-avatar-project repo-avatar">
        <span class="aui-avatar-inner">
          <a class="repo-avatar-link" href="/damienmarchand/test-public">
            <img src="https://d3oaxc4q5k2d6q.cloudfront.net/m/5fe8c0346b2d/img/language-avatars/c_sharp_32.png" alt="" data-modules="utils/retina">
          </a>
        </span>
      </span>
      <span class="repo-name">
        <a class="execute" href="/damienmarchand/test-public">test public</a>
        
      </span>
      <span class="last-updated">
        
          Updated <time datetime="2014-11-05T22:13:57.822553+00:00">2014-11-05</time>
        
      </span>
    </li>
  
</ul>

Thx for your help.

Upvotes: 0

Views: 75

Answers (2)

David Thomas
David Thomas

Reputation: 253318

I'd suggest:

// select the appropriate elements, set the href attribute:
$('.repository-list a').attr('href', function (i,h) {
  // i is the index of the current element in the returned collection,
  // h is the current value of the attribute we're modifying.

  // we return the string '/something' joined with the string of the current href:
  return '/something' + h;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="repository-list" data-current-status="all">
  
    
    <li class="iterable-item">
      <span class="aui-avatar aui-avatar-medium aui-avatar-project repo-avatar">
        <span class="aui-avatar-inner">
          <a class="repo-avatar-link" href="/damienmarchand/sqdsdqsdsfds">
            <img src="https://d3oaxc4q5k2d6q.cloudfront.net/m/5fe8c0346b2d/img/language-avatars/default_32.png" alt="" data-modules="utils/retina">
          </a>
        </span>
      </span>
      <span class="repo-name">
        <a class="execute" href="/damienmarchand/sqdsdqsdsfds">sqdsdqsdsfds</a>
        
      </span>
      <span class="last-updated">
        
          Updated <time datetime="2014-11-07T23:25:52.716869+00:00">2014-11-07</time>
        
      </span>
    </li>
  
    
    <li class="iterable-item">
      <span class="aui-avatar aui-avatar-medium aui-avatar-project repo-avatar">
        <span class="aui-avatar-inner">
          <a class="repo-avatar-link" href="/damienmarchand/sdqdsd">
            <img src="https://d3oaxc4q5k2d6q.cloudfront.net/m/5fe8c0346b2d/img/language-avatars/java_32.png" alt="" data-modules="utils/retina">
          </a>
        </span>
      </span>
      <span class="repo-name">
        <a class="execute" href="/damienmarchand/sdqdsd">sdqdsd</a>
        
      </span>
      <span class="last-updated">
        
          Updated <time datetime="2014-11-07T23:25:21.619545+00:00">2014-11-07</time>
        
      </span>
    </li>
  
    
    <li class="iterable-item">
      <span class="aui-avatar aui-avatar-medium aui-avatar-project repo-avatar">
        <span class="aui-avatar-inner">
          <a class="repo-avatar-link" href="/damienmarchand/test-public">
            <img src="https://d3oaxc4q5k2d6q.cloudfront.net/m/5fe8c0346b2d/img/language-avatars/c_sharp_32.png" alt="" data-modules="utils/retina">
          </a>
        </span>
      </span>
      <span class="repo-name">
        <a class="execute" href="/damienmarchand/test-public">test public</a>
        
      </span>
      <span class="last-updated">
        
          Updated <time datetime="2014-11-05T22:13:57.822553+00:00">2014-11-05</time>
        
      </span>
    </li>
  
</ul>

Upvotes: 0

Rhumborl
Rhumborl

Reputation: 16609

You just need to find the relevant tags, then for each one use attr() to get and update the href attribute for each one:

// find a tags within elements with class .repository-list
$('.repository-list a').each(function() {
  $(this).attr('href', 'http://something' + $(this).attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="repository-list" data-current-status="all">
  
    
    <li class="iterable-item">
      <span class="aui-avatar aui-avatar-medium aui-avatar-project repo-avatar">
        <span class="aui-avatar-inner">
          <a class="repo-avatar-link" href="/damienmarchand/sqdsdqsdsfds">
            <img src="https://d3oaxc4q5k2d6q.cloudfront.net/m/5fe8c0346b2d/img/language-avatars/default_32.png" alt="" data-modules="utils/retina">
          </a>
        </span>
      </span>
      <span class="repo-name">
        <a class="execute" href="/damienmarchand/sqdsdqsdsfds">sqdsdqsdsfds</a>
        
      </span>
      <span class="last-updated">
        
          Updated <time datetime="2014-11-07T23:25:52.716869+00:00">2014-11-07</time>
        
      </span>
    </li>
  
    
    <li class="iterable-item">
      <span class="aui-avatar aui-avatar-medium aui-avatar-project repo-avatar">
        <span class="aui-avatar-inner">
          <a class="repo-avatar-link" href="/damienmarchand/sdqdsd">
            <img src="https://d3oaxc4q5k2d6q.cloudfront.net/m/5fe8c0346b2d/img/language-avatars/java_32.png" alt="" data-modules="utils/retina">
          </a>
        </span>
      </span>
      <span class="repo-name">
        <a class="execute" href="/damienmarchand/sdqdsd">sdqdsd</a>
        
      </span>
      <span class="last-updated">
        
          Updated <time datetime="2014-11-07T23:25:21.619545+00:00">2014-11-07</time>
        
      </span>
    </li>
  
    
    <li class="iterable-item">
      <span class="aui-avatar aui-avatar-medium aui-avatar-project repo-avatar">
        <span class="aui-avatar-inner">
          <a class="repo-avatar-link" href="/damienmarchand/test-public">
            <img src="https://d3oaxc4q5k2d6q.cloudfront.net/m/5fe8c0346b2d/img/language-avatars/c_sharp_32.png" alt="" data-modules="utils/retina">
          </a>
        </span>
      </span>
      <span class="repo-name">
        <a class="execute" href="/damienmarchand/test-public">test public</a>
        
      </span>
      <span class="last-updated">
        
          Updated <time datetime="2014-11-05T22:13:57.822553+00:00">2014-11-05</time>
        
      </span>
    </li>
  
</ul>

Upvotes: 1

Related Questions