Wrap a tag in a link by name from the object

Question

We have such an object with properties in the form of headings and links:

var links = {"Title1": "link1", "Title2": "link2", "Title3": "link3" };

The page contains a bulleted list of the following type:

 <ul class="list"> <li><b>12:00</b> <h3>Title1</h3> <i>Some text</i></li> <li><b>13:00</b> <h3>Title2</h3> <i>Some text</i></li> <li><b>14:00</b> <h3>Title3</h3></li> </ul>

Is it possible to find a match on the headings and add a link to this particular item in the list? I would be grateful for the example, at least the definition of the desired item.

Final result:

 <ul class="list"> <li><b>12:00</b> <h3>Title1</h3> <i>Some text</i> <a href="link1" title="Title1">Read more</a></li> <li><b>13:00</b> <h3>Title2</h3> <i>Some text</i> <a href="link2" title="Title2">Read more</a></li> <li><b>14:00</b> <h3>Title3</h3> <a href="link3" title="Title3">Read more</a></li> </ul>

Or, in extreme cases, wrap the headline in a link.

@Grundy if you share an example or specify what I need to determine the item, I will be very grateful.
All you need to know is how to work with objects in js and how to search for elements by DOM.
That's all ... But most likely soon such an easy task will be written to you in the answers.
But really, you could just poke yourself in Google and learn a little language, and write it yourself.

Accepted Answer · 2017-03-21T09:48:00

 var links = { "Title1": "link1", "Title2": "link2", "Title3": "link3" }; var list = $('.list'); for (var item in links) { var el = list.find('h3:contains("' + item + '")'); el.closest('li').append(' <a href="' + links[item] + '" title="' + item + '">Read more</a>'); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li><b>12:00</b> <h3>Title1</h3> <i>Some text</i></li> <li><b>13:00</b> <h3>Title2</h3> <i>Some text</i></li> <li><b>14:00</b> <h3>Title3</h3> </li> </ul>

find - Searches for items within already selected items.

contains - Corresponds to elements that contain the string text . Case sensitive.

closest - For each of the selected elements, closest () will search for the closest matching element from among the following: the selected element itself, its parent, its progenitor, and so on, until the beginning of the DOM tree.

and how did you want to use there? He does not seem to work with a regular object? - Grundy
Thank you very much. An example is very simple in appearance when ready. I will go again to re-read all the links. - Alexey Giryayev

user207618 · Answer 2 · 2017-03-21T09:44:08

Logic and ten minutes in google.
But they convince me here that it is necessary to help even in such matters, therefore:

 let links = { "Title1": "link1", "Title2": "link2", "Title3": "link3" }; // Ищем все заголовки (h3) в списке Array.from(document.querySelectorAll('.list h3')).forEach(e => { // Если значение заголовка (Title3, например) есть в карте if(e.innerText in links){ // То создаём ссылку с нужными параметрами let a = document.createElement('A'); a.href = links[e.innerText]; a.innerText = 'Read more'; // И вставляем её в конец родительского li e.parentNode.appendChild(a); } });

 <ul class="list"> <li><b>12:00</b><h3>Title1</h3> <i>Some text</i></li> <li><b>13:00</b><h3>Title2</h3> <i>Some text</i></li> <li><b>14:00</b><h3>Something</h3></li> <li><b>14:00</b><h3>Title3</h3></li> </ul>

@SashaOmelchenko, I did not send to Google, although it would be worth it, but gave the answer, read carefully.
If you point out useful links that I could find in google, I would be grateful.
I always, before asking a question, look for solutions online and try everything myself.
Even having received the answer, I analyze it so that everything is clear.
That is why, to the same "elementary" questions (from your point of view) and give answers to the questions of other users.

Wrap a tag in a link by name from the object

2 answers 2

More articles: