Category: jQuery

To remove hyphens from a JavaScript string, we can call the JavaScript string’s replace method.

For instance, we can write:

const str = "185-51-671";  
const newStr = str.replace(/-/g, "");  
console.log(newStr)

We call replace with a regex that matches all dashes with /-/ .

The g flag matches all instances of the pattern.

Then we replace all of them with empty strings as specified in the 2nd argument.

Therefore, newStr is '18551671' .

To add infinite scrolling with jQuery, we can detect when we scrolled to the bottom of the page with the scroll method.

To do this, we write the following HTML to contain our content:

<div id="lipsum">
</div>

Then we can add some content into the div when we scrolled to the bottom of the page by writing:

const arr = [...Array(30)].fill().map((_, i) => i)
for (const n of arr) {
  $('#lipsum').append(`<p>${n}</p>`)
}

$(window).scroll(() => {
  if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
    for (const n of arr) {
      $('#lipsum').append(`<p style='background-color: red'>${n}</p>`)
    }
  }
});

We first add some content to the div with:

const arr = [...Array(30)].fill().map((_, i) => i)
for (const n of arr) {
  $('#lipsum').append(`<p>${n}</p>`)
}

Then we detect when we scroll to the bottom of the page by calling $(window).scroll with a callback.

In the callback, we check if we scrolled to the bottom of the page with:

$(window).scrollTop() >= $(document).height() - $(window).height() - 10

And if that’s true , we add some content with the for-of loop.

scrollTop gets the scroll position of the page.

And $(document).height() — $(window).height() — 10 is the position at the bottom of the page in pixels.

Now we should see new content displayed when we scrolled to the bottom of the page.

To use in jQuery hasClass Method to get a specific element without a given class, we can use the hasClass method with the ! operator to find the element without the given class.

For instance, if we have the following HTML:

<div id='foo'>  
  foo  
</div>

Then we can use:

if (!$('#foo').hasClass('bar')) {  
  //...  
}

to check the div with ID foo has the class bar .

hasClass returns true if the element has the even class, so we can negate that with the ! operator.

If it doesn’t then we do something in the if statement body.

To determine the pixel length of a string in JavaScript and jQuery, we can put the string in a span and then use the jQuery width method to determine the width of the span.

For instance, we can write the following HTML:

<span></span>

Then we can write:

const span = document.querySelector('span')  
span.innerText = 'Here is my string'  
console.log($(span).width())

to get the span width document.querySelector .

And then we set innerText to the string of the span.

Finally, we log the span’s width that we get from $(span).width() from jQuery.

The console log should log 111.

To get all HTML element IDs with jQuery, we just have to select all the elements and then we can get the id property from each element.

For instance, if we have the following HTML:

<div id="mydiv">
  <span id='span1'></span>
  <span id='span2'></span>
</div>

Then we can get the IDs of all the span elements by writing:

const ids = [...$("#mydiv").find("span")].map(s => s.id);
console.log(ids)

We get all the spans with:

$("#mydiv").find("span")

Then we convert the returned nodelist into an array with the spread operator.

And then we call the JavaScript array map method it the returned array with a callback that returns the id from the s span element.

Therefore ids is [“span1”, “span2”] .