ID and class attributes in Jquery

Question

i am new to JavaScript and i do not know what does following mean:

  $("#left-pane-tare-button a").show();

$('div#port-picker a.connect').text(getMessage('noconnect')).addClass('active');

Answer 1

This is not really a jQuery problem, it is a CSS selector problem.

"#left-pane-tare-button a"

The selector above is looking for an element with an id of left-pane-tare-button and selecting all the <a> tags that are descendants of the <div>.

A space means you are selecting the descendant of the element before the space.

As for

'div#port-picker a.connect'

A . means it is looking for a class.

In this case, it is looking for a <div> with the id port-picker and it is selecting all the descendant <a> tags that have the connect class.

For example:

<div id="port-picker">
    <a class="connect">
    <a class="foo">
    <a class="connect">
</div>

In this example, it will select the first and third <a> tag.

Here are some good resources to learn more about CSS selectors:

• https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors
• https://www.w3schools.com/cssref/css_selectors.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

UPDATE: It appears I was wrong about the > as noted in this answer.

Example:

<div id="port-picker">
    <a class="connect">
    <a class="connect">
    <a class="foo">
    <div>
        <a class="connect">
    </div>
</div>

Using

'div#port-picker a.connect'

will select ALL <a> tags that are descendants of <div>

However

'div#port-picker > a.connect'

will only select THE FIRST THREE <a> tags that are children of <div id="port-picker">, because the fourth one is not a direct child of the original <div>.