How can I customize the first and second word of a specific class in my code?
This is an example of my current code:
<h2 class="content-heading">Latest News</h2>
I would like to achieve something similar to this:
<h2 class="content-heading"><span class="1">Latest</span> <span class="2">News</span></h2>
You have the option to define the html by using a function and then utilizing the split method on the innerText, followed by mapping it to a span.
$('.content-heading').html(function() {
return this.innerText.split(' ').map(function(e, i) {
return $('<span />', {
class: 'i' + i,
text: e
});
});
});.i0 {
color:red;
}
.i1{
color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="content-heading">Latest News</h2>PLEASE NOTE: Classes must adhere to SGML naming conventions. In my demonstration, I have added a prefix of i.
Here's an alternative method:
let title = $(".content-heading").text();
title = title.replace(/.*?\s/, function (result) {
return "<span class='class1'>" + result + "</span>";
});
$(".content-heading").html(title);
Instead of using numbers for the classes, you can replace them with letters when accessing them in CSS. For example, change 1 to letter and 2 to another letter.
<h2 class="content-heading"><span class="h">Latest</span> <span class="f">News</span></h2>
.h{
color: red;
}
.f{
color: blue;
}
If you're searching for a solution that can be implemented independently, using javascript may be the answer you seek. Take a look at this suggestion.
This script will surround your variable named word with a <span> element styled with the class name first-word.
$('.content-heading').each(function() {
var html = $(this).html();
var word = html.substr(0, html.indexOf(" "));
var rest = html.substr(html.indexOf(" "));
$(this).html(rest).prepend($("<span/>").html(word).addClass("first-word"));
});
Feel free to explore an illustrative demonstration on JSFiddle.
Here is a possible implementation:
let header = $('h2');
let textArray = header.text().split(' ');
for( let i = 0; i < 2; i++ ) {
textArray[i] = '<span class="class'+i+'">' + textArray[i] + '</span>';
}
header.html(textArray.join(' '));
(Credit goes to the source where I found this answer: jQuery: wrap every nth word in a span)
My Web App is built using Angular and I encountered an issue with Gulp. Every time I add a new custom CSS line to my HTML file and run Gulp, it automatically removes that line from the file. <!--MATERILIZE CORE CSS--> <link h ...
After selecting a team from an array in one component, I am having trouble passing that selected team to another component. While I can log the selected team in the same component, I'm unable to access it in the other component. My goal is to use the ...
I'm facing an issue with a click event in a script that is associated with a specific div id. When I move the mouse within the div area and click (the cursor remains unchanged), the event listener does not activate. How can I make the div area clickab ...
I'm facing an issue when trying to clear the text box. The error message I am receiving is: org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with Command duration or timeout: 30.14 se ...
I'm working with JSON data extracted from an Excel file. I need to match the First Name in the JSON data with the 'First Name' field and append those elements to a specific div. Additionally, if the JSON data includes a 'status', I ...
Within a Javascript context, I am tackling an array of objects named users. Accessing users[1].name allows me to retrieve the user's name. I am aiming to utilize the user ID as the index instead of relying on an incrementing counter. For instance, in ...
When it comes to creating a basic Meteor app with React, this is the structure I have put in place: <head> <title>test</title> </head> <body> <div id="render-target"></div> </body> Here is the start ...
Trying to figure out how to concatenate values from a handsontable grid, I stumbled upon some code on jsfiddle that caught my eye. Here is the link: http://jsfiddle.net/9onuhpn7/4/ The task at hand involves 3 columns A,B,C and an attempt to concatenate ...
Currently, I have implemented the jQuery DataTables plugin on Meteor without any packages and it has been quite successful. However, I am facing an issue with a specific table that is constantly being updated due to new insertions into the collection. The ...
As a ruby on rails developer, my recent foray into learning Angular and React has opened up new possibilities in the world of Javascript technologies. Despite reading comparison posts to gain insight into the reasons behind using different frameworks and l ...
I came across a fascinating tutorial about creating a family tree using CSS3 only. However, I'm struggling to understand how to depict a marriage. To explain further: What the code currently accomplishes is this: what i aim to include is this: Alth ...
Consider this array structure: const testData = [ { group: "Team1", info: [ { key: 123, person: "Alice", type: "Football" }, { key: 456, person: "Bob", type: " ...
How can I get a string containing a new line character to wrap in a table cell? When I attempt to bind it, the text does not break at the new line character as expected. I have attached a screenshot for reference. In the console window, it displays correct ...
I've been attempting to position two elements at the end of the Bootstrap 5 navbar, but I haven't been successful. I've experimented with using ms-auto within a div that wraps around the login and sign up elements, but that hasn't work ...
When utilizing the Google Maps service to plot a route with multiple waypoints and under slow 3G conditions, I need to deactivate an HTML button until the new route is traced. calculateRoad(departure: any, arrival: any) { const request = { origin: ...
I'm facing an issue with updating the status of servers on a page. I noticed that in order for the update to work, I have to first use model.save() or model.set() with a dummy value before setting the real values using model.set(), otherwise it fails. ...
One of my tasks involves retrieving json objects through a simple post method. The json contains multiple campaigns, organized in an array structure. Each campaign holds slots, which are also arrays with one or more base_image elements. My goal is to di ...
I am working with an SQLite table that has columns for id and name. I have created a JSON array of rows from the autocomplete.php page. Now, I am trying to populate a dropdown list in my select element using this JSON data by utilizing jQuery and JavaScrip ...
UPDATE: I have recently implemented a function that calculates and displays the length of a certain element, but it currently requires user interaction to trigger it: function check() { alert($("#currentTechnicalPositions").html().length); } After s ...
When including one JavaScript file into another, I typically use the following syntax: var userControllerObj = require("../controller/userController"), userController = new userControllerObj.UserGatewayController(); I'm curious if I can u ...