JQuery how get css property from HTML string

Question

I get a jQuery object from an HTML string, then I loop through the elements and try to get their CSS property, but in return I get an empty string.

var htmlStr = '<p style="text-align: left;">This first string</p>';
htmlStr += '<p style="text-align: center;">This second string</p>';
htmlStr += '<p style="text-align: right;">This third string</p>';
var itemsContent = $(htmlStr);
for (let i = 0; i < itemsContent.length; ++i)
{
    let align = itemsContent.eq(i).css("text-align");
    ...
}

variable align allways empty. Please tell me what am I doing wrong?

Answer 1

You could just call Parser#parseFromString and iterate over p elements finding who has text-align :

let parser = new DOMParser()
let domDocument = parser.parseFromString(htmlStr, 'text/html')
let elements = [].slice.call(domDocument.querySelectorAll('p'))

elements.filter(e => e.style.textAlign)

Answer 2

Your code works fine. Take note of the console.log and comment.

var htmlStr = '<p style="text-align: left;">This first string</p>';
    htmlStr += '<p style="text-align: center;">This second string</p>';
    htmlStr += '<p style="text-align: right;">This third string</p>';
var itemsContent = $(htmlStr);
for (let i = 0; i < itemsContent.length; ++i) {
  let align = itemsContent.eq(i).css("text-align");
  console.log(align); // you can call a function here or re-asign the variable.
}

Answer 3

Your code should work just fine, but just incase i rewrote it with test

 var htmlStr = '<p style="text-align: left;">This first string</p>'; htmlStr += '<p style="text-align: center;">This second string</p>'; htmlStr += '<p style="text-align: right;">This third string</p>'; $(htmlStr).each(function(){ var align = this.style.textAlign; console.log(align); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 4

try this

var htmlStr = '<p style="text-align: left;">This first string</p>';
htmlStr += '<p style="text-align: center;">This second string</p>';
htmlStr += '<p style="text-align: right;">This third string</p>';
var itemsContent = $(htmlStr);
i=0;
for (let i = 0; i < itemsContent.length; ++i)

{
    let align = itemsContent.eq(i).css("text-align");
}