get array of elements having specific href attribute

Question

I need array of elements (inside story) having href attribute starts with view.php.

Here are my tryings, without success:

let arr = $('#story').find(".el[href.startsWith('view.php')]");
//let arr = $('#story').find(".el[attr('href').startsWith('view.php')]");

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='story'>
<a class='el' href = 'view.php?id=323'>lorem</a>
<a class='el' href = 'about.php'>ipsum</a>
<a class='el' href = 'index.php'>lorem</a>
<a class='el' href = 'view.php?id=525'>ipsum</a>
</div>

Nenad Vracar · Accepted Answer · 2019-02-08 10:22:47Z

6

You can use a[href^="view.php"] starts with attribute selector and then get array of href values with map and get methods.

let arr = $('#story a[href^="view.php"]').map(function() {
  return $(this).attr('href')
}).get()

console.log(arr)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='story'>
  <a class='el' href='view.php?id=323'>lorem</a>
  <a class='el' href='about.php'>ipsum</a>
  <a class='el' href='index.php'>lorem</a>
  <a class='el' href='view.php?id=525'>ipsum</a>
</div>

answered Feb 8, 2019 at 10:22

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

1 Comment

qadenza Over a year ago

pls help on this way - let arr = $('#story').find(".el[href^='view.php']"); I nedd array of el's

samb102 · Accepted Answer · 2019-02-08 10:23:11Z

3

document.querySelectorAll('#story > a[href^="view.php"]')

answered Feb 8, 2019 at 10:23

samb102

1,1145 silver badges13 bronze badges

2 Comments

qadenza Over a year ago

result + some strange text in console, pls try

samb102 Over a year ago

Yep, it returns an NodeList object ! You can convert it to array easily with [...myNodeList]. Now you should be able to loop over it like a regular array :)

tijn167 · Accepted Answer · 2019-02-08 10:44:44Z

1

This one prints 2 times hello for this situation.

let arr = [];
$('a[href^="view.php"]').each(function() {
    arr.push(this.getAttribute("href"));
});

console.log(arr[0])
console.log(arr[1])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='story'>
<a class='el' href = 'view.php?id=323'>lorem</a>
<a class='el' href = 'about.php'>ipsum</a>
<a class='el' href = 'index.php'>lorem</a>
<a class='el' href = 'view.php?id=525'>ipsum</a>
</div>

edited Feb 8, 2019 at 10:44

answered Feb 8, 2019 at 10:32

tijn167

5933 silver badges27 bronze badges

6 Comments

qadenza Over a year ago

and where is the array wanted ?

tijn167 Over a year ago

Added it for you.

qadenza Over a year ago

the first one is missing

tijn167 Over a year ago

Ofcourse, I log the second one.Added the first one for you:)

qadenza Over a year ago

upvoted, but I need array of el's not href's, pls see my comment on Nenad Vracar's post

|

dporechny · Accepted Answer · 2019-02-08 11:17:16Z

0

Try this:

const links = document.getElementsByClassName('el')

const views = Array.prototype.filter.call(
  links,
  el =>  el.getAttribute('href').startsWith('view')
);

console.log(views)

<div id='story'>
  <a class='el' href = 'view.php?id=323'>First view link</a>
  <a class='el' href = 'about.php'>ipsum</a>
  <a class='el' href = 'index.php'>lorem</a>
  <a class='el' href = 'view.php?id=525'>Second view link</a>
</div>

answered Feb 8, 2019 at 11:17

dporechny

6465 silver badges12 bronze badges

Collectives™ on Stack Overflow

get array of elements having specific href attribute

4 Answers 4

1 Comment

2 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related