How can I use jQuery to identify the numerical range within class/td/div elements and modify their CSS styles?

1# I need assistance in changing the CSS properties of a TD, Class, and div using a selector that specifies a specific number range. Specifically, I am looking to modify the css of torrent results with a seed count between 250-25000. Any torrents with a seed count lower or exceeding this range should have a different css attribute applied. Any help would be greatly appreciated.

References (both do not work as intended):

1. http://jsfiddle.net/fVtaF/4/
2. http://jsfiddle.net/fVtaF/3/

My code for identifying keywords in titles does not produce desired results:

 1. $( '.blah td:contains("250-25000") ') .css( {"display":"none"} );
 2. $(".blah td:contains(255-25000)").css({'color':'red'});

I want to style this number in CSS Red (250-25000):

<table id="searchResult">
<td align="right">1024</td>
</table>

2# Additionally, how can I adjust my code to identify keywords without considering capitalization?

$( '.feed-item-container:contains("Justin Bieber") ') .css( {"display":"none"} );
javascriptjquerycssselector

Answer №1

If you need a case insensitive contains() function in jQuery, you can create one yourself.

jQuery.expr[':'].contains = function(a, i, m) {
   return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

Click here to check out the code on JSFiddle.

To select elements with data between 250 and 25000, you can use the jQuery filter function like this:

var tds=$("td").filter(function() {
    if($(this).text()>250&&$(this).text()<25000){
        return this;
    }
});
tds.css({'color':'red'});

Check out the sample code on JSFiddle here.

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

Methods to retrieve an array's value list dynamically using the 'id' in Vuejs

**User.vue** <template> <div> <div v-for="list in lists" :key="list.id">{{ list.val }} {{ list.kk }}</div> </div> </template> <script> import { datalist } from "./datalist"; export default { name: "User ...

javascriptvue.js

How can jQuery and cheerio be used to select links that contain a specific word in either the href attribute or text content?

Looking for a method in jQuery to efficiently identify and select all links that contain a specific keyword within either the href attribute or the link text itself. Any suggestions on how to achieve this using Cheerio for Node.js? I am currently working ...

jquerynode.jsnpm

Hide panel when button is clicked - bootstrap

Is it possible to make a panel collapse by clicking a regular bootstrap button? Below is the code snippet: <div class="panel panel-primary" style="border-color: #464646;"> <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; ...

javascripthtmltwitter-bootstrapangular

Ways to align the label at the center of an MUI Textfield

My goal is to center the label and helper text in the middle of the Textfield. I managed to achieve this by adding padding to MuiInputLabel-root, but it's not responsive on different screen sizes (the Textfield changes size and the label loses its cen ...

javascriptreactjstypescriptmaterial-ui

Web Audio API functions are encountering a playback issue on iOS 13.3, despite working smoothly on previous iOS versions

I have been developing an audio visualizer using the web audio API. It was functioning smoothly on PC, however, after upgrading to iOS 13.3, it no longer operates on Apple mobile devices. The root cause of this issue remains a mystery to me. The problem s ...

javascripthtmliosweb-audio-api

Adding padding to the top causes the scrollbar to hide at the bottom in Firefox

My HTML page includes the following configured DIV: <div id="contentDiv" style="padding-top: 20px; padding-left: 20px; overflow: auto; height: 100%;" > The content within this DIV is large enough to require a vertical scrollbar. When viewed in IE, ...

cssfirefoxscrollbarpadding

Popup to confirm JqGrid inline editing

While I am working on inline editing with jqgrid, the client has requested a confirmation dialog to appear when saving changes, similar to how delete operates. Upon reviewing http://github.com/tonytomov/jqGrid/blob/master/js/grid.inlinedit.js, it is eviden ...

jqueryjqgridjquery-ui

Ensure accurate detection of invalid values for SVG Elements in React using jest testing framework

When testing my react app, I am attempting to capture any errors that are thrown or logged to the console. If a regular HTML element such as <p> contains invalid attributes like <p color={false}></p>, react will display an error via cons ...

javascriptreactjsunit-testingsvgjestjs

Initiate the process of displaying data on a datetime chart using Highcharts

I am currently developing a yearly chart, but I've encountered a small issue. The chart begins in January, however there is no data available until May. The client specifically wants the chart to only display when there is data available, and unfortu ...

javajavascriptjqueryjson

Proper usage of a method within another method in a Vue component

Currently, I am extracting GPS data from an image using exifjs. My objective is to convert the latitude and longitude variables into a decimal variable as illustrated below: <template lang="html"> <div class="upload-wrap"> <button cla ...

javascriptvue.jsvuejs2

The functionality of Bootstrap Mobile css is most effective when navigating by scrolling downwards

I am experiencing a strange issue. I am using Ajax to load the Search form. The CSS is being applied correctly, but there is an unusual problem with the bottom margin. The bottom margin only appears when you scroll down in mobile view. When you load the f ...

htmlcsstwitter-bootstrapbootstrap-4

Adaptable images - Adjusting image size for various screen dimensions

Currently, my website is built using the framework . I am looking for a solution to make images resize based on different screen sizes, such as iPhones. Can anyone suggest the simplest way to achieve this? I have done some research online but there are t ...

javascripthtmlcssresponsemedia-queries

Comparing strings with if-else statement

I am having trouble comparing strings in this array. For some reason, the strings are never equal. var person = ["Sam", "John", "Mary", "Liz"]; var searchedName = prompt("Enter name"); var resultMessage = ""; for (index in person) { var currentName = ...

javascriptif-statementstring-comparison

gulp-watch does not monitor files that are newly created or deleted

Currently working on a task: gulp.task('assetsInject', function () { gulp.src(paths.index) .pipe(plugins.inject( gulp.src(paths.scripts, {read: false}), { addRootSlash: false } ...

javascriptnode.jsgulp

What is the best way to reset a setInterval ID in Angular?

In my Angular project, I am developing a simple timer functionality that consists of two buttons – one button to start the timer and another to stop it. The timer uses setInterval with a delay of 1000ms. However, when the stop button is pressed, the time ...

javascriptangularsetinterval

Center 3 elements horizontally using Flexbox, ensuring the center element is aligned properly

Is it possible to center 3 elements using flexbox on a page? The middle element should be centered on the page, while the left and right elements can vary in width. Please refer to the image below: I am not certain if this layout is achievable with flexbo ...

cssflexbox

Arrow functions in ECMAScript 6

var createTempItem = id => ({ id: id, name: "Temporary Product" }); I understand that the arrow function above is the same as: var createTempItem = function(id) { return { id: id, name: "Temporary Product" }; }; However, I am ...

javascriptreactjsecmascript-6

`Locating an image alongside text for seamless integration`

Take a moment to view the image displayed below Feature 1 and feature 4 are two distinct divs that I have styled with the Bootstrap class .col-md-4 Here is the corresponding HTML code <div class="col-md-4"> <div class="feature-group-1"> ...

htmlcsstwitter-bootstrap-3

Guidelines on launching an ionic 4 modal using routes

How can I open a modal using routes? I attempted the following approach, but it did not work as expected: ngOnInit() { this.launchModal(); } async launchModal() { const modal = await this.modalController.create({ component: AuthPasswordR ...

javascriptangularionic4

Is it possible to have evenly spaced divisions within a fixed wrapper?

I have been experimenting with creating a dynamic navbar that remains at the top of a webpage. Here's what I have so far: <style> .sticky-nav-wrapper > div { color: #000000; display: inline-block; display: -moz-inline-box; * ...

htmlcss