Organizing lists with HTML unordered lists

Is it possible to sort list items by numbers within a strong tag using JavaScript code? The current code successfully sorts the numbers, but removes them from the div tag. (The JavaScript code used below is for sorting by Name and works properly when 'b = ...(LI)'.) HTML:

<section>
<button class="sortbynum" onclick="sortListNum()">Sort By Num</button>
<ul id="sort">
    <li> 
       <div><h2>Name</h2></div>  
       <a href=""><img src=""/></a> 
       <div><span>Something:...</span></div>
       <div><span>something:...</span></div>
       <div><span>HHJS: <strong class="sortNum">456</strong></span></div>
    </li>
    <li>again</li>
</ul>

JavaScript:

function sortListNum() {var list, i, switching, b, shouldSwitch, dir,switchcount = 0;list = document.getElementById("sort");switching = true;dir = "asc"; while (switching) {switching = false;b = list.getElementsByClassName("sortNum");
for (i = 0; i < (b.length - 1); i++) {
  shouldSwitch = false;
  if (dir == "asc") {
    if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
      shouldSwitch= true;
      break;
    }
  } else if (dir == "desc") {
    if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
      shouldSwitch= true;
      break;
    }
  }
}
if (shouldSwitch) {
  b[i].parentNode.insertBefore(b[i + 1], b[i]);
  switching = true;
  switchcount ++;
} else {
  if (switchcount == 0 && dir == "asc") {
    dir = "desc";
    switching = true;
  }
}}}

Answer №1

It appears that you are inquiring about extracting text from inline elements.

You have the capability to select them similarly to any other element, but there is a bit more complexity involved.

The innerHTML function will return HTML content, which may include both HTML tags and plain text.

innerText specifically retrieves only the plain text from an element.

On the other hand, textContent will provide all plain text within an element combined into one string, with newline characters separating text from different lines.

If you need to extract the text from a specific part of an element, such as a strong tag, you can use the following syntax:

document.querySelector('#sort .sortNum').innerText

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

What is the best way to include the existing query string value in the hyperlinks on my page?

My main coding objective is to simultaneously search multiple websites. To accomplish this, I want to create a query string containing the search terms (primarily for analytics purposes) using a form. By utilizing JavaScript, I am aiming to include the s ...

List the acceptable favicon formats for Internet Explorer version 10 and above

When I say type, I'm referring to the file extension. My favicon displays correctly in Firefox, Chrome, and Safari, but someone suggested that the issue may be related to the favicon type. Is there a reliable online resource where I can find informa ...

The logic behind combining elements from two arrays in JavaScript/TypeScript

Explanation of two different array formats const arr1 = [ { "elementName": "one" }, { "elementName": "two" } ] const arr2 = [ { "type": "RPT_PROPERTY_DEMOGRP", "values": [ { "label": "HH" }, { " ...

Add a distinct characteristic to each JSON object

If there is a JSON file with the following structure: { "Person1": { "name": "Jon", "value1": 4, "value2": 2 }, "Person2": { "name": "Jan ...

The `DataProvider` component received an invalid `data` prop of type `number` instead of the expected `array`. This issue is occurring within the context of using React-bootstrap

Lately, I've been working on fetching data from Firebase Realtime Database and then displaying it using react-bootstrap-table2. However, I've encountered a snag when attempting to actually render the data. Upon running my code, an error message p ...

Prevent form submission when processing is in progress

I've got this code working perfectly: $(function() { $("input,textarea").jqBootstrapValidation({ preventSubmit: true, submitError: function($form, event, errors) { // additional error messages or events ...

Having difficulty accurately interpreting the input value

As someone new to JavaScript, I set out to create a basic calculator using JavaScript and HTML. My goal is to have two input fields, named Fld1 and Fld2, that would add up the values entered into them when submitting. However, despite parsing the input val ...

Separate a string using commas but disregard any commas inside quotation marks

Similar Question: JavaScript code for parsing CSV data There is a string that looks like this: "display, Name" <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d49584e497d49584e49135e5250">[email protected]</a> ...

When working with basic shapes such as "rect" or "circle," the inline SVG may not be displayed

This is the code we are using to style our checkboxes: .checkbox-default { display: inline-block; *display: inline; vertical-align: middle; margin: 0; padding: 0; width: 22px; height: 22px; background: url('data:image/ ...

Configuring properties for a component by retrieving data from MongoDB using an API request

My current API call utilizes axios in the following format: Service.get('path/to/api', (status, data) => { this.setState({ ComponentData: data, loaded: true}); }); {this.state.loaded && <Component id={this.state.ComponentD ...

When new text is added to Div, the first line is not displayed

One of the divs on my page has an ID of "TrancriptBox" and contains multiple lines of text. When I scroll through it on my iPad, everything works fine. However, if I scroll and then change the text within that div, it doesn't display the first line o ...

"Integrating `react-textarea-code-editor` with Remix: A Step-by-Step Guide

Upon loading the root of my web app, I encountered an error. The react-textarea-code-editor component is accessed via a separate route. The same error persisted even after following the suggestions provided here: Adding react-textarea-code-editor to the ...

Ways to display text when hovering over an image link

Despite trying various techniques recommended by fellow Stackoverflow users who faced similar issues, I still encountered a problem where the text appeared below the image even after applying the suggested methods to my code. I also experimented with a me ...

CSS for button positioning inspired by game controller layout, built to be responsive

Is there a way to arrange these 4 buttons in a layout resembling a game controller? Currently, they are displayed like this and I want them to be centered at the bottom of the screen, smaller, and responsive. What changes should I make? Would using #contro ...

Navigate only within the tbody section of the Material UI Table by scrolling

Utilizing the material-ui Table component to build a table with a sticky header presents a challenge. The default behavior is for the scroll to encompass both the thead and tbody of the table. However, I specifically require the scroll functionality to be ...

Is there a method for removing the Microsoft Translator widget while still keeping the translation feature intact?

I am currently utilizing the Microsoft Translation Widget to automatically translate a webpage without requiring any user interaction. Unfortunately, I have been facing an issue where I am unable to remove or hide the widget that keeps popping up on the p ...

Submitting with enter key on typeahead suggestions

Seeking guidance on Bootstrap typeahead: how can I configure it to submit the entered text upon pressing the enter key? Specifically, if I type "hello" in the typeahead input and hit enter, how can I submit "hello"? I've successfully disabled the aut ...

Internet Explorer and Edge browsers are concealing box shadow behind the parent div

When using an input slider range, the box-shadow is being applied to the active thumb in all browsers except for IE & EDGE. In these browsers, the shadow is cutting or hiding behind the parent div #c. I have already tried setting overflow:visible on the p ...

When the component is reloaded, props will become defined

I am trying to iterate through an object's array to create a table structure like the one below: import React from "react"; export default function Scoreboard(props) { return ( <div className="scoreboard"> <ta ...

Guide on deactivating the HTML drawer layout on a website with Selenium using Java

I am currently working on automating a website and I have encountered a challenge with a drawer Menu Panel. My goal is to open the menu, verify certain elements within it, and then close or hide it. However, I am facing difficulty in closing/hiding this d ...