Question

There is a html as below.

1
2
3

<a id="option1" data-id="10" data-option="21" href="#">
       Click to do something
</a>

I want to get the data-id and data-option values while clicking this element.

How to make it happen?

Answer

Solution:

1
2
3
4
5

$('#option1').on('click', function () {
    var $el = $(this);
    
    console.log($el.data('id'), $el.data('option'));
});

The console log will be 10 and 21.

Reference

• Getting data-* attribute for onclick event for an html element

This is the end of post

Question

There is a html code as below.

1
2
3
4
5
6

<div class="ctr-1">
  <h3>Title</h3>
  <div class="ctr-2">
    <h3>Title</h3>
  </div>
</div>

And I wanna apply a style to first element <h3> with .ctr-1 h3:first-child{ display:none; }, however, it will apply to all <h3>, I only want the first <h3> has this style.

Answer

:first-of-type and :nth-of-type() might be helpful here.

:first-of-type

The :first-of-type CSS represents the first element of its type among a group of sibling elements. See example below.

1
2
3

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

1
2
3

p:first-of-type {
  color: red;
}

In this way, Paragraph 1 will be red.

:nth-of-type()

The :nth-of-type() CSS matches one or more elements of a given type, based on their position among a group of siblings.

1
2
3
4
5
6
7
8

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p>2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p>3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* Odd paragraphs */
p:nth-of-type(2n + 1) {
  color: red;
}

/* Even paragraphs */
p:nth-of-type(2n) {
  color: blue;
}

/* First paragraph */
p:nth-of-type(1) {
  font-weight: bold;
}

In this way, 1st paragraph. and 3rd paragraph. will be red, also 2nd paragraph. and 4th paragraph. will be blue.

Besides that, 1st paragraph. will be bold as well.

Reference

• How do I hide only the first element of a type?
• :first-of-type
• :nth-of-type()

This is the end of post

Question

There is an if statement as below.

1
2
3

if (str.indexOf("Abc") == -1) {
    console.log("pass");
}

I want to make Abc case insensitive, so Abc, abc, ABc etc will still pass through.

Answer

Add .toLowerCase() after str. This method will make all letters to lower case.

1
2
3

if (str.toLowerCase().indexOf("Abc") == -1) {
    console.log("pass");
}

In this way, Abc will convert into abc.

Reference

• Javascript contains case insensitive

This is the end of post

Question

How to check if a string is empty?

Answer

By using if statement to check.

1
2
3

if (strValue) {
    //do something
}

it will only run if strValue is not empty.

Reference

• How do you check for an empty string in JavaScript?

This is the end of post

Question

The is an array, and I wanna add an element at the beginning and the end of the array.

Answer

So the array is

1

var array = [2, 3, 4];

The new element is var newBeginning = 1;, and var newEnd = 5;.

To the beginning

If we wanna at to the beginning, we can use unshift function.

1

array.unshift(newBeginning);   // [1, 2, 3, 4]

To the end

If we wanna at to the end, we can use push function.

1

array.unshift(newEnd);   // [2, 3, 4, 5]

Reference

• Javascript - Wait 5 seconds before executing next line

This is the end of post

Question

Like title says, how to wait, let’s say 5 seconds, to execute the next line in javascript?

Answer

First, create a wait function to freeze the code:

1
2
3
4
5
6
7

function wait(ms){
   var start = new Date().getTime();
   var end = start;
   while(end < start + ms) {
     end = new Date().getTime();
  }
}

Insert wait function into your code, the paramemter is millisecond.

1
2
3

console.log('before');
wait(5000);
console.log('after');

Reference

• Javascript - Wait 5 seconds before executing next line

This is the end of post

Question

There is an object array:

1

objArray = [ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ];

How to extract the values of key foo into an arrya like [1, 3, 5]?

Answer

ES 6

By using map and => function can easily make it happen.

1

var result = objArray.map(a => a.foo);

ES 5

Since ES 5 doesn’t support =>, so we need a function to get the value.

1

var result = objArray.map(function(a) {return a.foo;});

Reference

• From an array of objects, extract value of a property as array

This is the end of post

Question

There is a console.log from Chrome webkit inspector. How to copy it directly?

Answer

1. Right-click an object in Chrome’s console and select Store as Global Variable from the context menu. It will return something like temp1 as the variable name.
2. Chrome also has a copy() method, so copy(temp1) in the console should copy that object to your clipboard.

Reference

• Javascript / Chrome - How to copy an object from the webkit inspector as code

This is the end of post

Question

I have a string call abcfdhsfjkds-21947, and I want to get the value after the symbol -, how to do that?

Answer

1
2

var str = 'abcfdhsfjkds-21947';
var result = str.split('-').pop();

The result is the value you want.

Reference

• Get everything after the dash in a string in javascript

This is the end of post

Question

I have a string called I have cats, dogs, and goats., and I want to replace to I have AA, BB, and CC..

How to make it happen only with one function?

Answer

If you only wanna it happen easily, just need one function to replace all of them.

1
2
3
4
5
6
7
8
9

var str = "I have cats, dogs, and goats";
var mapObj = {
   cats:"AA",
   dogs:"BB",
   goats:"CC"
};
str = str.replace(/cat|dog|goat/gi, function(matched){
  return mapObj[matched];
});

Reference

• Replace multiple strings with multiple other strings

This is the end of post