Question

There is a list as below.

1
2
3
4
5

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

If I want to move A or B or C to the first place after clicking on it, what should I do?

Answer

By using JQuery method prepend to make it happen.

Solution:

1
2
3
4
5
6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

1
2
3

$('ul li').click(function(event) {
  $('ul').prepend($(this))
});

Reference

• Click on element and move to first place in the list

This is the end of post

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