Customize the border style for the span element

I attempted to use the code below in JavaScript/jQuery to adjust the border thickness.

Unfortunately, it seems to be ineffective. Can someone please assist me?

//$("span").css({"border":"4px solid green"});
document.getElementById("192.168.42.151:8984_solr").getElementsByClassName("trees_shard1_replica_n1").find("span").style.borderWidth = "thick";
.card {
  position: relative;
  display: inline-block;
  margin: 10px;
}

.card a {
  padding-right: 8px;
}

.card a span {
  border-radius: 1.25rem;
  border: 1px solid green;
}

.card a .replicaActive {
  color: transparent;
  background-color: transparent;
}

.card a .replicaLeader {
  background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="card-body" id="192.168.42.151:8984_solr">
    <a href="#" class="trees_shard1_replica_n1">
      <span class="badge replicaActive">0</span>
    </a>
  </div>
</div>
<div class="card">
  <div class="card-body" id="192.168.1.4:8983_solr">
    <a href="#" class="trees_shard1_replica_n3">
      <span class="badge replicaLeader">0</span>
    </a>
  </div>
</div>

Mirror: https://jsfiddle.net/amitkushwaha1710/asdxfc94/44/

javascriptjqueryhtmlcss

Answer №1

Issue detected with the id attribute, currently set as "192.168.42.151:8984_solr"

The id attribute should start with a letter ([A-Za-z]), followed by any combination of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

To resolve this, you need to modify the id attribute.

You can update it like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="card-body" id="example_id_attribute_here">
    <a href="#" class="trees_shard1_replica_n1">
      <span class="badge replicaActive">0</span>
    </a>
  </div>
</div>
<div class="card">
  <div class="card-body" id="new_example_id_here">
    <a href="#" class="trees_shard1_replica_n3">
      <span class="badge replicaLeader">0</span>
    </a>
  </div>
</div>

$('.card-body').find(".trees_shard1_replica_n1").find("span").css({'color':'red'});

Answer №2

Looks like there's an issue in your code that involves a combination of jquery and javascript.

Here is an alternative solution: (No need for jquery)

document.getElementsByClassName("trees_shard1_replica_n1")[0].querySelector('span').style.borderWidth = "thick";
.card {
  position: relative;
  display: inline-block;
  margin: 10px;
}

.card a {
  padding-right: 8px;
}

.card a span {
  border-radius: 1.25rem;
  border: 1px solid green;
}

.card a .replicaActive {
  color: transparent;
  background-color: transparent;
}

.card a .replicaLeader {
  background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="card-body" id="192.168.42.151:8984_solr">
    <a href="#" class="trees_shard1_replica_n1">
      <span class="badge replicaActive">0</span>
    </a>
  </div>
</div>
<div class="card">
  <div class="card-body" id="192.168.1.4:8983_solr">
    <a href="#" class="trees_shard1_replica_n3">
      <span class="badge replicaLeader">0</span>
    </a>
  </div>
</div>

Answer №3

In javascript, you cannot use the find() method to locate an element, but you can achieve the same result by following this approach

//$("span").css({"border":"4px solid green"});
var solrId = document.getElementById("192.168.42.151:8984_solr").getElementsByClassName('trees_shard1_replica_n1')[0];
solrId.getElementsByTagName("span")[0].style.borderWidth = "thick";
.card {
  position: relative;
  display: inline-block;
  margin: 10px;
}

.card a {
  padding-right: 8px;
}

.card a span {
  border-radius: 1.25rem;
  border: 1px solid green;
}

.card a .replicaActive {
  color: transparent;
  background-color: transparent;
}

.card a .replicaLeader {
  background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="card-body" id="192.168.42.151:8984_solr">
    <a href="#" class="trees_shard1_replica_n1">
      <span class="badge replicaActive">0</span>
    </a>
  </div>
</div>
<div class="card">
  <div class="card-body" id="192.168.1.4:8983_solr">
    <a href="#" class="trees_shard1_replica_n3">
      <span class="badge replicaLeader">0</span>
    </a>
  </div>
</div>

I trust that this solution will be beneficial.

Answer №4

const nodeName="192.168.42.151:8984_solr";
$(document.getElementById(nodeName)).find(".trees_shard1_replica_n1").find("span").css({'border':'4px solid green'});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Minimize the gap between legend text and icon in Highchart

Is there a way to decrease the space between the number and icon? I am currently working with Angular 8 and Highchart. Below is the configuration of the chart legend. https://i.stack.imgur.com/0dL7y.jpg this.legend = { align: 'center', verti ...

javascriptangularhighcharts

Tips on resolving the 'jQuery reference error' in an ASP.NET environment

I've included all the necessary jQuery files, but I keep getting an error that says jQuery is not defined. Here's how I'm loading jQuery: <script src="/Scripts/jquery.js" type="text/javascript"></script> <script src="/Scripts ...

jquery

The Value of Kendo Data

Below is my current kendo code snippet: <script> $("#dropdowntest").kendoDropDownList({ optionLabel: "Select N#", dataTextField: "NNumber", dataValueField: "AircraftID", index: 0, ...

javascriptkendo-ui

Contrasting onevent with addEventListener

After studying various DOM events, I attempted to implement the 'blur' event on the HTML body. My first attempt was with onblur document.body.onblur = () => { dosomething(); } and I also tried using AddEventListener document.body.addEven ...

javascripthtmldom

The updating of Angular 2 CLI variables does not occur

As a complete newcomer to Angular 2, I recently attempted to start my first project using the Angular CLI. Unfortunately, I encountered some issues. It seems that the variables in my views are not updating as expected. I followed the typical steps: ng n ...

javascriptnode.jsangularangular-cli

Having trouble with my PDO insert query functionality

I've been trying to input the data from my form into the database, but unfortunately, my current code doesn't seem to be working. I followed some tutorials on YouTube for this particular project, and despite following them closely, the data I ent ...

phphtmlpdo

AngularJS: Double the power of Ajax. Can you assist me?

ajax was successful twice. Take a look. ...

javascriptangularjs

How to resolve undefined Axios Authorization headers in Vue.JS and Node.JS interactions?

Encountering an issue while trying to set authorization headers for my axios instance. Here is the code snippet from my Vue.JS application running on http://localhost:8080 : axios.defaults.headers.common['Authorization'] = 'Bearer ' ...

javascriptnode.jsvue.jsaxios

Arranging multiple Label and Input fields in HTML/CSS: How to create a clean and

I'm struggling with HTML and CSS, trying to figure out how to align multiple elements on a page. I've managed to line up all the rows on the page, but for some reason, the labels are appearing above the input fields when I want them to appear be ...

javascriptjqueryhtmlcss

Interaction between elements in Object3D

I have a collection of objects grouped together in Object3D and I'm attempting to detect when they are clicked on. My scene has dimensions of 600x400, my camera is part of a three-object, and the code for handling events looks like this: function onD ...

javascriptthree.js

Troubleshooting the Checkbox Oncheck Functionality

Before checking out the following code snippet, I have a requirement. Whenever a specific checkbox (identified by id cfc1) is clicked, it should not show as checked. I have implemented the onCheck function for this purpose, but I'm struggling to fig ...

javascripthtmlreactjsmaterial-uiweb-component

Using JQuery, retrieve all field values on click, excluding the value of the closest field in each row

I have a dynamic table where each row consists of an input field and a button. I am searching for a simpler way to select all input fields except the one in the current row when clicking the button in each row. All input fields have the same name and the r ...

javascriptjquery

Why is the function app.get('/') not triggering? The problem seems to be related to cookies and user authentication

Need help with app.get('/') not being called I am working on implementing cookies to allow multiple users to be logged in simultaneously. Currently, users can log in successfully. However, upon refreshing the page, all users get logged in as the ...

javascriptexpresssocket.ioexpress-session

Modifying the border of images in a Weebly gallery

I'm having trouble changing the gallery image borders on Weebly. The client prefers using Weebly for easy backend editing once the design is in place, so I need to work within these parameters. Usually, I can make most code edits easily...but this iss ...

jquerycssimage-galleryweebly

Clicking the button to send the form using JavaScript

Currently, I am dealing with a shopping cart plugin that relies on a basic form on the product page to send values such as price and product name. However, I am facing an issue where this plugin uses a standard submit button to transmit the values, and I w ...

phpjavascripthtmlformswordpress

Is there a way to stop the dropdown from automatically appearing in a DropDownList?

Seeking a solution to use a custom table as the dropdown portion for a DropDownList in my project. My goal is for users to see the custom table when they click on the DropDownList, rather than the default dropdown menu. I expected to be able to achieve th ...

javascriptjqueryasp.netdrop-down-menuinternet-explorer-7

selecting unique elements using classes is not possible with jquery

I am experimenting with using ajax on dynamically generated html elements from django. I have tried selecting the instances by class, but for some reason, it is not working as expected. Can anyone point out my mistake here? javascript $(document).ready(fu ...

javascriptpythonhtmldjangoajax

Maintain the property characteristics (writable, configurable) following the execution of JSON.parse()

Imagine a scenario where an object is created elsewhere and passed to my module. It could have been generated on the server in node.js, or perhaps in a different module where it was then serialized using JSON.stringify() for transmission (especially if it ...

javascriptjson

How come child elements are clipped in IE versions 9 and above when using the border-radius property with a fixed value?

When applying css border-radius:[some value] to a parent element and having a fixed positioned child element, I noticed that in Internet Explorer the child element appears to be 'clipped' into the parent. However, if I use border-radius:0 in the ...

cssinternet-explorer-9

How can I attach a click event to the left border of a div using jQuery?

I am wondering about a div element <div id="preview"> </div> Can anyone suggest a method to attach a click event specifically to the left border of this div? Your help is greatly appreciated. ...

javascriptjqueryhtmlclick