We Keep Coding

How to add a class to wordpress buttons

I want to add a class to the download button of all the posts of my wordpress site, but without having to do it in each post
I have umami software running, where I track my traffic, I would like to add events every time someone presses the download button
For that event to be registered, I must add the class "umami--click--download-button" to each button.
I have already tried in many ways but nothing seems to work
the last thing i did was add the following script but it doesn't work either
<script>
$( "div" ).addClass(function( index, currentClass ) {
var addedClass;
if ( currentClass === "wp-block-button" ) {
addedClass = "umami--click--download-button";
}
return addedClass;
});
</script>
In the element inspector the button appears as follows
<div class="wp-block-button has-custom-font-size has-large-font-size">
<a class="wp-block-button__link has-white-color
has-vivid-cyan-blue-to-vivid-purple-gradient-background
has-text-color has-background wp-element-button" href="https://earnlink.click/"
style="border-radius:10px" target="_blank"
rel="noreferrer noopener">DOWNLOAD</a></div>
Thank you very much in advance to whoever answers

Here is the correct code. Try this and let me know if it works fine or not. If you see any error in console please provide the error message for debugging
<script>
(function ($) {
$('div.wp-block-button .wp-block-button__link').each(function () {
const classToAdd = 'umami--click--download-button';
const button = $(this);
if (!button.hasClass(classToAdd)) {
button.addClass(classToAdd);
}
});
})(jQuery);
</script>

you need to test the entire class list. see example below. This will add the class to the <div> tag not the <a> tag.
$("div").addClass(function(index, currentClass) {
var addedClass;
if (currentClass === "wp-block-button has-custom-font-size has-large-font-size") {
addedClass = "umami--click--download-button";
}
return addedClass;
});
.umami--click--download-button {
color: red;
}
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div class="wp-block-button has-custom-font-size has-large-font-size">this is a test
<a class="wp-block-button__link has-white-color
has-vivid-cyan-blue-to-vivid-purple-gradient-background
has-text-color has-background wp-element-button" href="https://earnlink.click/" style="border-radius:10px" target="_blank" rel="noreferrer noopener">DOWNLOAD</a></div>
<div class="wp-block-button has-custom-font-size has-large-font-size">this is a test another test</div>
<div class="wp-block-button ">and another</div>

How can I use $(.class) in an appropriate way?

I wanted to add some part of my main page with infinite scroll and it is working. But also I want to add this part of my page with an link. Normally it is work if my site name is like (https://example.com/index) but I don't want to redirect it. I want to make it work in (https://example.com) format. I think the problem is about jQuery selector.
function setupPage() {
const list = $(".list");
if (count === 0) {
list.append(
` <div> Hello</div>`);
count++;
}
setTimeout("window.location = 'index#contact'", 100);
}
<li>Contact</li>
<div class="list "> Content. </div>

You can directly set location.hash instead. Also, it is better to pass a function to setTimeout rather than a string to evaluate.
setTimeout(()=>window.location.hash = 'contact', 100);

function setupPage() {
const list = $(".list");
if (count === 0) {
list.append(
` <div> Hello</div>`);
count++;
}
setTimeout("window.location = '#contact'", 100);
}
removing index will help

How can I automatically merge unnecessary html tags

How can I merge a tags with the same url together if they are beside each other. For instance, I am dealing with html that looks similar to this:
<div>
<a href='/url.com'>This is</a><a href='/url.com'> the </a><a href='/url.com'>same link.</a>
This is not linked but might have some <b>bolding</b> or not.
<a href='/url.com'>These are</a><a href='/url2.com'> two different links.</a>
</div>
Through jQuery, I would like the inside of the div to be:
<div>
<a href='/url.com'>This is the same link.</a>
This is not linked but might have some <b>bolding</b> or not.
<a href='/url.com'>These are</a><a href='/url2.com'> two different links.</a>
</div>
I can merge tags together by iterating through each pair of a tags to see if they share (1) the same link and (2) the same parent, but then I get output like this:
<div>
<a href='/url.com'>This is the same link.These are</a>
This is not linked but might have some <b>bolding</b> or not.
<a href='/url2.com'> two different links.</a>
</div>
I'm not sure how to realize that there's text in the middle.
EDIT: Here's what I've tried
$('a').addClass('linkCheck');
while ($('.linkCheck').length > 0) {
first_to_check = $('.linkCheck:first');
first_to_check.removeClass('linkCheck');
if ($('.linkCheck').length > 0) {
second_to_check = $('.linkCheck:first');
replaced = false;
if (first_to_check.attr('href') == second_to_check.attr('href')) {
found_first = false;
old_content_html = $('#divID').html();
old_content_text = $('#divID').text();
first_to_check.parent().children().each(function () {
if (found_first == true && $(this).get(0) == second_to_check.get(0)) {
html = second_to_check.html();
second_to_check.remove();
first_to_check.html(first_to_check.html() + html);
found_first = false;
replaced = true;
if ($('#divID').text() != old_content_text) {
replaced = false;
$('#divID').html(old_content_html);
}
return false;
}
if ($(this).get(0) == first_to_check.get(0)) {
found_first = true;
}
else {
found_first = false;
}
});
}
if (replaced == true) {
first_to_check.addClass('linkCheck');
}
}
}

For each anchor, see if its next sibling is an anchor with the same href. If so, append its sibling's contents() and remove the sibling.
You'll need to use the DOM nextSibling to handle text nodes correctly, because jQuery's next() method skips over them.
Repeat as long as duplicate adjacent hrefs are found:
function merge() {
var merged;
do {
merged = false;
$('a').each(function() {
var nexta = $(this.nextSibling);
if (nexta.attr('href') === $(this).attr('href')) {
$(this).append(nexta.contents());
merged = true;
nexta.remove();
}
});
} while (merged);
} //merge
merge();
$('pre').text($('div').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href='/url.com'>This is</a><a href='/url.com'> the </a><a href='/url.com'>same link.</a>
This is not linked and has <b>bolding</b>.
<a href='/url.com'>These are</a><a href='/url2.com'> two different links.</a>
<br>
<a href='/url.com'>This is</a><a href='/url.com'> the </a><a href='/url.com'>same link.</a>
This is not linked and does not have bolding.
<a href='/url.com'>These are</a><a href='/url2.com'> two different links.</a>
</div>
<hr>
Output:
<pre></pre>

It may seem like this will be a simple operation but it won't. The reason being is that the text in the middle is not a node of it's own but instead just the innerHTML of the parent DIV. Basically what you will need to do is get your tags by tag name, and in order to check if they are adjacent to one another use the following code.
var linkTags=document.getElementsByTagName("A");
for(i=0; i<linkTags.length-1; i++){
j=i+1;
indexOfI=document.innerHTML.indexOf(linkTags[i].outerHTML);
lengthOfI=linkTags[i].outerHTML.length;
indexOfJ=document.innerHTML.indexOf(linkTags[j].outerHTML);
if(indexOfI+lengthOfI==indexOfJ){
//ELEMENTS ARE ADJACENT
}else{
testFlag=true;
//GET CONTENTS BETWEEN ELEMENTS AS STRING
var testString=document.innerHTML.substr(indexOfI+lengthOfI, indexOfJ);
//TEST CONTENTS FOR WHITESPACE
for(k=0; k<testString.length; k++;){
if(testString.char(k)!=" " && testString.char(k)!="\n"){
//SET FLAG INDICATING NON WHITESPACE CHARACTER FOUND
testFlag=false;
//SET K TO LOOPS MAX TO BREAK LOOP
k=testString.length;
}
}
if(testFlag){
//ELEMENTS ARE ADJACENTWITH WHITESPACE BETWEEN
}
}
}
Of course with this adjacency check you are automatically assured that they are of the same parent as well as there is no way to open or close the parent tags and still remain adjacent in the code.

You can try this... Add a class for which anchors need to be verified. $.each through all of the <a> tags. filtering the outstanding items that haven't been verified to see if the href and html() matches. If they match remove them. Then remove the verify class from the item so that on the next each loop the items that have been verified aren't included.
$('a').addClass('verify').each(function () {
var $this = $(this);
//you can change the html() to text() is you are only worried about match the innerText
$('a.verify').not(this).filter(function () {
return ($(this).html() == $this.html() && $(this).attr('href') == $this.attr('href'))
}).remove();
$this.removeClass('verify')
});

Open Expanding List from Href

I'm trying to modify this pen I found on CodePen. I'd like to be able to open a specific list on the page from another page. Clicking the link should open the corresponding section on the next page on page load.
I'm a bit of a newbie when it comes to jQuery, so I appreciate any help I can get. I've tried searching around and have an idea of what I need to target, but I haven't been able to make it happen. Here is my code:
HTML:
<!--Link on Previous Page-->
Click Here
<!--Target List-->
<div class="integration-list">
<ul>
<li class="integration">
<a class="expand" id="list">
<div class="expand_intro"><h3 class="teal_bold">Click Here</h3></div>
<div class="right-arrow">▼</div>
</a>
<div class="detail">
<div><p>Lorem Ipsum Dolor...</p></div>
</div>
</li>
</ul>
</div>
JS:
$(function() {
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "▼") {
$expand.text("▲");
} else {
$expand.text("▼");
}
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
$('.expand').find('a[href*='+ thash + ']').trigger('click');
});
});

Few things that I did to get it to work:
The trigger event is probably firing before the handler is actually attached. You can use setTimeout as a way around this.
Also, even with setTimeout around $('.expand').find('a[href*='+ thash + ']').trigger('click'); it didn't work for me. I changed that to simply $(thash).click();.
The complete code of the "expand.js" file:
$(function() {
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
setTimeout(function() {
$(thash).click();
}, 10);
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "â–¼") { //If you copy/paste, make sure to fix these arrows
$expand.text("â–²");
} else {
$expand.text("â–¼");
}
});
});
Apparently the arrows don't display properly here, so watch that if you copy/paste this.

Selecting a single class from a multi class element

I'm trying to select a specific class (in this case page1, page2, page3 etc.)
I've written this code that works fine for a single class, i've tried using .match() to exclude the .plink class picked up in dis but can't get it working.
$(function(){
$("a.plink").click(function() {
var dis = $(this).attr("class"); // This is the problem line, I need it to contain 'page1' ONLY. Not 'page1 plink'.
$("#page1,#page2,#page3").hide();
$("#" + dis).show();
return false;
});
});
The HTML that is associated with this is:
<div id="page-links">
<a class="page1 plink" href="#">About</a>
<a class="page2 plink" href="#">History</a>
<a class="page3 plink" href="#">Backstage</a>
</div>
EDIT:
These are the DIV's being shown and hidden:
<div id="page1">
<?php include_once("page1.php");?>
</div>
<div id="page2">
<?php include_once("page2.php");?>
</div>
<div id="page3">
<?php include_once("page3.php");?>
</div>
Is there a simple way to achieve this without regular expression matching?

$(function(){
var pages = $('div[id^=page]');
$("a.plink").click(function() {
var dis = $(this).attr("class").replace(' plink', '');
pages.hide().filter('#' + dis).show();
return false;
});
});

This should be
$("." + dis).show();
for class and in your example there are all classes.
As you mentioned simple way so it could be
$("a.plink").click(function() {
$(".plink").hide();
$(this).show();
return false;
});
According to your question after edit
$("a.plink").click(function() {
$('div[id^="page"]').not('#page-links').hide();
pid=$(this).attr('class').split(' ')[0];
$('#'+pid).show();
return false;
});
Here is a fiddle.

The JavaScript code is not correct. With the "#" you select ids from the html-element.
As you have only classes, the right way is to do it with "."
So this would be correct:
$(function(){
$("a.plink").click(function() {
var dis = $(this).attr("class");
$(".page1,.page2,.page3").hide();
$("." + dis).show();
return false;
});
});
I didn't test it, but I think you have to change something with the var dis.
If you click on .page1, the variable dis would contain "page1 plink".
$("." + dis).show();
would be
$(".page1 plink").show();
So I recommend to split the two classes, as it should be like
$(".page1 .plink").show();

You are trying to associate functionality of a click by appending classes. It would make more sense to put id of the div you want to show in the href
html:
<div id="page-links">
<a class="plink" href="#page1">About</a>
<a class="plink" href="#page2">History</a>
<a class=" plink" href="#page3">Backstage</a>
</div>
<div id="page1">
Content 1
</div>
<div id="page2">
Content 2
</div>
<div id="page3">
Content 3
</div>
​javascript:
jQuery(function ($) {
var pages = [];
function showPage(page) {
var i;
for(i = 0; i < pages.length; i++)
{
if(page === pages[i]) {
$(pages[i]).show();
} else {
$(pages[i]).hide();
}
}
}
// Store each href in a pages array and add handlers
$('.plink').each( function() {
var page = $(this).attr('href');
pages.push(page);
$(this).attr('href', '#');
$(this).click(function () {
showPage(page);
});
});
// show the first page
if(pages.length > 0) {
showPage(pages[0]);
}
});​
Example:
http://jsfiddle.net/38qLB/
And just so I don't avoid the actual question, which is how do you select a class from a multi class element, you should follow this example of splitting up the class name Get class list for element with jQuery if you truly insist on using classes to make your link/div association

You don't really want to exclude the plink class, because that will bring you confusion and trouble when you need to add another class. Instead you want to extract just the pageX class:
// Regex for extracting pageXX
var reg = /^(.*\s)?(page\d+)([^\d].*)?$/;
dis = reg.exec(dis)[2];
I haven't testet this 100%, but put these two lines in right after var dis = $(this).attr("class"); and you should hopefully be good to go.

i down't know if i get your question right
to get all classes with class plink u can use
var klasses $("a.plink");
now u can loop true the items
var yourClasses = Array();
for(var klass in klasses)
{
var word = klass.attr('class').replace(" plink", "");
yourClasses.push(word);
}
now you have all the classes wich have the class plink
hope this was where u where looking for

If I was just doing a minor tweak to fix your existing structure I would do something like this:
$(document).ready(function() {
$('a.plink').click(function() {
var id = $.trim(this.className.replace('plink', ''));
/*adding a "page" class to each of the page divs makes hiding the visible one a bit easier*/
$('div.page').hide();
/*otherwise use the version from sheikh*/
//$('div[id^="page"]').not('#page-links').hide();
$('div#' + id).show();
});
});
The main change I would recommend to your existing markup would be to add a common "page" class to each of the page divs. Here is a fiddle
If I was starting on this from scratch I would probably take a slightly different approach in which I define an "active" class and toggle which elements have it rather than using show/hide on the divs. And that would end up looking something like this:
Markup:
<div id="page-links">
<a class="plink active" href="#page1">About</a>
<a class="plink" href="#page2">History</a>
<a class="plink" href="#page3">Backstage</a>
</div>
<div id="page1" class='page active'> </div>
<div id="page2" class='page'> </div>
<div id="page3" class='page'> </div>
CSS:
div.page
{
height: 300px;
display:none;
}
div.page.active
{
display:block;
}
a.plink
{
padding-left:5px;
padding-right:5px;
}
a.plink.active
{
background-color:#ddd;
}
div#page1
{
background-color:blue;
}
div#page2
{
background-color:green;
}
div#page3
{
background-color:red;
}
Script:
$(document).ready(function() {
$('a.plink').click(function() {
var id = $(this).attr('href');
$('.active').removeClass('active');
$(this).addClass('active');
$('div' + id).addClass('active');
});
});
Or the fiddle here.
Oh and to answer the title question rather than just the end behavior described...
var classes = this.className.split(' ');
var id;
for (var i = 0; i < classes.length; i++) {
if(classes[i].substring(4) === classes[i].replace('page', '')) {
id = classes[i];
break;
}
}
should end up with id containing the "page#" value associated with the link that was clicked regardless of its position in the list of classes.