Get the title text from a selected div and create an array using JQuery

Question

Get the title text from a selected div and create an array using JQuery

I'm attempting to gather the text from all divs' Title Attributes and store them in an array, but I'm having trouble finding the correct selection.

The title is important because it holds the specific string that I require.

Below are three divs with unique titles:

<div class = 'test' title='title1'>Hello</div>
<div class = 'test' title='title2'>goodbye</div>
<div class = 'test' title='title3'>farewell</div>

This is my current jQuery code:

$(document).ready(function() {

$array = $('[title][title!=]').each(function(){
  $(this).attr("title").makeArray;})

 alert($array)

});

The alert only displays [Object object]

In this example, I am aiming to create an array containing [Title1, Title2, Title3].

Any assistance on achieving this would be greatly appreciated.

********************************UPDATE************************************

Thank you, the initial solution worked perfectly. Your help is truly valued.

javascript jquery html css

Answer 1

Answer №1

const titlesArray = $.map($('[data-title][data-title!=""]'), function(element) { return element.getAttribute('data-title') });

FIDDLE

Finds and stores all elements with a non-empty data title attribute into an array via mapping.

Answer 2

const titlesArray = $.map($('[data-title][data-title!=""]'), function(element) { return element.getAttribute('data-title') });

FIDDLE

Finds and stores all elements with a non-empty data title attribute into an array via mapping.

Answer 3

Answer №2

let myArray = []; // initialize an empty array and assign it to a variable outside of the current scope

$('.item').each(function() { // iterate through all elements with class 'item'
    let elementText = $(this).text(); // get the text content of the current element
    myArray.push(elementText); // add the text content to the array
});

console.log(myArray); // use this for testing purposes, remember to remove after verifying functionality

Answer 4

let myArray = []; // initialize an empty array and assign it to a variable outside of the current scope

$('.item').each(function() { // iterate through all elements with class 'item'
    let elementText = $(this).text(); // get the text content of the current element
    myArray.push(elementText); // add the text content to the array
});

console.log(myArray); // use this for testing purposes, remember to remove after verifying functionality

Answer 5

Answer №3

Here's a recommendation:

const headings = $('.example').map(function(){
    return this.heading;
}).get();

Check out these resources for more information:

get().
map().

Answer 6

Here's a recommendation:

const headings = $('.example').map(function(){
    return this.heading;
}).get();

Check out these resources for more information:

get().
map().

Get the title text from a selected div and create an array using JQuery

Answer №1

Answer №2

Answer №3

Similar questions

Tips for configuring options within a jQuery widget factory using data retrieved from server-side variables stored in a JSON file

How can I handle returning different types of Observables in my Angular application?

Zurb Foundation's sections have a strange issue where navigating between them introduces unexpected whitespace

Utilizing jQuery's Chained Selectors: Implementing Selectors on Previously Filtered Elements

The margin property in jQuery does not seem to be functioning properly when trying to send

Pass the selected ID from a Vue.js select component to an Axios post request and then render another select

Viewing the JSON value within a select tag using Zend Framework 2

Is there a way to limit the width of the input box once it reaches a specific pixel measurement?

Issue arising during reconnection following a disconnection in the node-redis client

Developing an attribute in a constructor using Typescript

Determine the dimensions of the objects within a JSON array

Remove element in array[x] removes the value without deleting the entire element

Expand the video comparison slider to occupy the entire width and height

Choose all items on each page with Material-UI's table pagination

Activate the Alert (https://material-ui.com/components/alert/#alert) starting from the React component at the bottom of the hierarchy

Retrieving information from a JSON reply within an Angular 2 service

When generating dynamic text boxes, a new area is always allocated for each new set of dynamic text boxes that are created

What steps should I take to ensure that the array yields the correct output?

The jQuery script fails to function properly within dynamically loaded content via ajax

Having trouble loading the React app when using the @mui/styles package