Develop Reference

Capitalise HTML Element Targeted by CSS Selectors Using jQuery

In line with previous questions, I have another jQuery problem that's doing my head in.
I have an Elementor widget that's outputting a list of attributes that I'm using as a filterable list, so basically, it's a bunch of a tags inside li's.
The problem is, these are being pulled from a different system (long story, not relevant to the question) and it is passing them across in all caps. I want them displaying as capitalised, but because of the nature of text-transform, CSS can't help me.
I've used text-transform to make them all lower case, and now I just want to use jQuery to capitalise them. It needs to be every word as some entries have multiple words in them. However, I'm not getting any results.
The css selectors needed to target the a tags are as follows:
.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a
I've tried loads of different scripts and messed with them for a good hour or two now and managed to get rid of errors (like $ is not a function) but cannot get the text to captialise.
I've mostly been trying exampls from [this thread][1].
Here is what I think is the closest I've come:
<script>
jQuery.fn.capitalize = function() {
jQuery(this[0]).keyup(function(event) {
var box = event.target;
var txt = $(this).val();
var stringStart = box.selectionStart;
var stringEnd = box.selectionEnd;
jQuery(this).val(txt.replace(/^(.)|(\s|\-)(.)/g, function($word) {
return $word.toUpperCase();
}));
box.setSelectionRange(stringStart , stringEnd);
});
return this;
}
</script>
<script>
jQuery('.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a').capitalize();
</script>
I'm fully aware that it's not structured particularly well and I know it can be neater, but I have tried numerous ways around it to no avail.
This code is currently being run from a HTML widget in the Elementor archive template where this list appears.
I'd really appreciate it is someone could point out the probably really obvious problems so I can learn from how dumb I'm being.
Many thanks.

Multiple Partial view and javascript

I am trying to create a paginated report with multiple KPI in a table using MVC, C#,and JavaScript. In order to accomplish this, I created a partial view, with a view model to represent the KPI component. I have a small JavaScript file with a document ready function to set the color of the KPI component. I load them like this.
<td style="width:30px">
#Html.Partial("Element", new ElementReadings((decimal)item.NLow,
(decimal)item.NHigh, (decimal)item.N_PCT))
</td>
<td style="width:30px">
#Html.Partial("Element", new ElementReadings((decimal)item.NALow,
(decimal)item.NAHigh, (decimal)item.Na_PCT))
</td>
My problem is the java script only runs on the first row of table. I have tried including the java script file in the partial view (which loads the same file every time according to viewing the page source) but it does not seem to fire except on the first row. I even tried to include the java script directly in the cshtml file, again no love.
I am not well versed in web based programming, and looking for any advice. My next step in a windows app would be looping through all the controls on the form, getting their name or some property, then run a function against what I found. Not sure if that is possible with java script and the DOM (?). Guess I will find out.
cheers
bob
Edit here is the java script code.
$(document).ready(function () {
var high = $('#high').val();
var low = $('#low').val();
var actualValue = $('#actualValue').val();
if (high > actualValue) {
$('#HighTextBox').addClass("redBackgroud");
}
else {
if (low < actualValue) {
$('#LowTextbox').addClass("redBackgroud");
}
else {
$('#MediumTextbox').addClass("greenBackground");
}
}
})

I think Stephen is correct, and I do not fully understand how html is rendered. I solved the problem on the server side when assigning values to the text boxes. Thanks for everyone's help and comments.

Load more posts with Ajax and JS

I want to scroll down to load more posts instead of loading all posts in the first time.
The one way that I know is using ajax(getpost) and JS(check scroll down)
When JS scrolling down event occurs,use JS to append a new post with html code
so for the append content, I am using '/' at the end of each line and put new element with '"+XXX+"' and need to change " to "
but I think it is not very efficient way for me to change post html code
Is there any other way to do this function instead of every time append a whole bunch of code? since one post may more than 100 lines of code, so it is too inconvenient.
append("<div class='post'>\
<h2>"+title+"</h2>\
<p>"+description+"</p>\
.....\
</div>");

Click event added to appended html; element not working as anticipated

OK I am sure I am doing something simple fundamentally wrong but am unable to resolve this issue on my own. I have tried googling and searching this forum and reading through the relevant parts of the jquery documentation.
If you need any further information please let me know. Many thanks in advance.
What I am trying to do:
I have a table showing details of various tests at the bottom of which I have a button to ad a new test. As each test comprises several rows of the table I have a template in a hidden div which I have cloned and appended to the live table. I am the using jquery to add appropriate classes and ids based on a variable integer for the sake of uniqueness. I am also attempting to add a click event to an image within one of the table cell to delete the rows relating to that particular test.
My current function
function newTest(sampleID){
var testID = $("#testCount").val();
$("#newTest tr").clone(true)
.addClass("test"+testID)
.appendTo("#testsTable"+sampleID);
$(".newdelbox:first")
.attr("id","testDelete"+testID)
.addClass("delbox")
.removeClass("newdelbox");
$(".test"+testID).on('click',"#testDelete"+testID,delSample(testID));
testID++;
$("#testCount").val(testID);
}
What I need to happen
Function to be called when image is clicked.
What is happening
Function is called only when script is assigned (not clicked). Function will not subsequently run when clicked. I am seeing no errors within the console.
What I have tried
chained to preceeding code:
.click(delSample(testID));
.on("click",delSample(testID));
.bind("click",delSample(testID));
As new line within function:
$(".test"+testID).on('click',"#testDelete"+testID,delSample(testID));
document.getElementById("testDelete"+testID).onclick(delSample(testID));
document.getElementById("testDelete"+testID).addEventListener("click",delSample(testID),false);

try this:
.click(function(){
delSample(testID);
});
OR
.on("click",function(){
delSample(testID);
});

i do not know of your html but i supose something like
.on("click",function(){
var current_id = jQuery(this).attr('id');
delSample(current_id);
});
just locate your id

Image gallery pagination

I have created the following image gallery.
http://jsfiddle.net/sfiddle/Nf7yR/7/
I think the thing is, that even though I can get a hand on the paragraphs css, the currentIndex won't update, i.e. an event listener seems to be missing.
var thumb = document.getElementById("thumb");
myParagraphs = thumb.getElementsByTagName("p");
console.log(myParagraphs[1]);
function thumby(){
$(myParagraphs[currentIndex]).css("background-color", "red");
}
thumby();
The thing is that I can not manage to link the image index with the index of the pagination dot (which has a normal p tag).
I want to code it in that way that if the first picture is displayed the first dot is red, if the second image is displayed the second ...
How could I approach this?
Thanks for any good advice as I invested a few hours already but can not get my head around it.
PS: no, I want no plugin or ready made imagegallery, I want my approach to work :-)

You made a function thumby() but you are calling it only once (during script start). You just need to call it when you change currentIndex. Here you have fixed code: http://jsfiddle.net/Nf7yR/10/ (I commented my edits).
BTW your code looks terrible. You should indent it properly to make it easier to read :)