CODEWITHSUNDEEP
javascriptjqueryvariablessplithref
dilonv2
dilonv2

Reputation: 53

Splitting an href and putting the html into a variable

I want to send this HTML, minus "/modal" into a variable:

<span class="detailsLink"><object><a href="/content/modal/30OffLucky" class="js-modal btn-secondary">DETAILS</a></object></span>

How can I add to this line to make it work?:

var eemailDetails = $('.detailsLink').html();

This ends up taking out /modal before it passes it into the variable:

var eemailDetails = $('.detailsLink a').each(function(){
    this.href = this.href.replace('/modal', '');
}).html();

Thank you for your time!

Upvotes: 1

Views: 245

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

The replacement should be made on the value retrieved instead of on the element's attribute.

So to retrieve the HTML markup including the targeted element, the outerHTML property can be used.

// Get the whole HTML
var eemailDetails = $('.detailsLink')[0].outerHTML;

// Remove /modal
eemailDetails = eemailDetails.replace('/modal', '');


console.log("The attribute unchanged: "+$('.detailsLink a').attr("href"));
console.log("The HTML retrieved: "+eemailDetails);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="detailsLink"><object><a href="/content/modal/30OffLucky" class="js-modal btn-secondary">DETAILS</a></object></span>

Upvotes: 1

Snowmonkey
Snowmonkey

Reputation: 3761

So the each works fine, and I save the variable as a data-attribute on the element itself. Later, when it gets clicked, I can recall that data attribute as needed. Hope this helps!

$('.detailsLink a').each(function(){
  var changedLink = this.href.replace('/modal', '');
    $(this).data("changedLink", changedLink)
});

$(".detailsLink a").on("click", function(event){
  event.preventDefault();
  var returnEl = $(this).parents(".detailsLink").clone();
  returnEl.find("a").attr("href", $(this).data("changedLink") );
  
  console.log(returnEl[0].outerHTML );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="detailsLink"><object><a href="/content/modal/30OffLucky" class="js-modal btn-secondary">DETAILS</a></object></span>
<span class="detailsLink"><object><a href="/content/modal/30OffNotSoLucky" class="js-modal btn-secondary">More DETAILS</a></object></span>
<span class="detailsLink"><object><a href="/content/modal/HaveAFrog" class="js-modal btn-secondary">Yet More DETAILS!</a></object></span>

Upvotes: 1

Related Questions