jQuery selector on variable containing HTML

Question

I am trying to select all the anchors contained in a variable that is html as below my code:

var deposti_row = "
<a data-country='uk' data-currency='eur' data-matching='country-currency'> AA </a>
<a data-country='uk' data-currency='eur' data-matching='country'> BB </a>
<a data-country='uk' data-currency='eur' data-matching='none'> CC </a>
"

$("a['data-matching']",$(deposit_row)).each( function(){
console.log(this);
});

But i get the error Syntax error, unrecognized expression: a['data-matching'] . Any help please ?

jsfiddle.net/rayon_1990/6pa6fmqf

Rayon
– Rayon

2016-04-14 12:45:01 +00:00
Commented Apr 14, 2016 at 12:45 — Rayon
– Rayon, Commented Apr 14, 2016 at 12:45

A. Wolff · Accepted Answer · 2016-04-14 12:44:45Z

2

Your syntax is wrong. Anyway, what you really want is to filter matched set:

$(deposit_row).filter('a[data-matching]').each(...)

And your string syntax is wrong too regarding handling mutliple lines. And deposti_row is not the same as deposit_row.

That makes many things wrong is so few posted code...

edited Apr 14, 2016 at 12:44

answered Apr 14, 2016 at 12:41

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Satpal Over a year ago

Also, need to take care of multi-line text variable

A. Wolff Over a year ago

@Satpal Ya good point. Indeed, many things wrong in OP posted code

A. Wolff Over a year ago

@MrCode Sorry but which root element are you talking about? OP wants to filter out selection i guess

BenG · Accepted Answer · 2016-04-14 12:48:23Z

1

Heres another way:-

create your multiline string with \.
As theres no root, check with has inside your each.

var deposit_row = "\
<a data-country='uk' data-currency='eur' data-matching='country-currency'> AA </a>\
<a data-country='uk' data-currency='eur' data-matching='country'> BB </a>\
<a data-country='uk' data-currency='eur' data-matching='none'> CC </a>\
";

$(deposit_row).each(function() {
  if ($(this).has('[data-matching]'))
    console.log(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Apr 14, 2016 at 12:48

BenG

15.2k5 gold badges48 silver badges62 bronze badges

1 Comment

A. Wolff Over a year ago

I really don't think it is what OP is expecting.

gurvinder372 · Accepted Answer · 2016-04-14 12:56:20Z

0

You need to remove single quotes from the attribute selector, then it should work as long anchor tag a has a parent element.

You need to wrap them in a div to treat them as descendants

deposit_row = $(deposit_row).wrap("<div></div>").html();

$("a[data-matching]",$(deposit_row)).each( function(){
   console.log(this);
});

Also try this if a['data-matching'] is the child of a root node

$(deposit_row).find("a['data-matching']").each(function(){
});

But since a is the root node here

$(deposit_row).children("a['data-matching']").each(function(){
});

edited Apr 14, 2016 at 12:56

answered Apr 14, 2016 at 12:40

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

2 Comments

gurvinder372 Over a year ago

@RayonDabre i think he has given quotes to the attribute name

Rayon Over a year ago

@Guru, Second argument in $ will act as parent of the selector...Much like .find().. Wrapping all a elements in any parent will help!

Collectives™ on Stack Overflow

jQuery selector on variable containing HTML

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related