How to rewrite this condition for all links within a specific block or a bulleted list with a class? Or to determine that element is inside a particular class?

 if (element.classList.contains('cat-name')) { return false; } 

Can this condition be used for several blocks with different classes? Is it correct to use .querySelectorAll?

Just how can you define links of this type?

 <a href="/index/0-0-0-1-13"> 

That is, is it possible to become attached to such a scheme: xxxxxx. Where instead of zeros are different numbers.

For examples, special thanks!

  • Didn't quite understand what you want - Yuri

1 answer 1

Are all links within a specific block or bulleted list with a class?

You can think of a lot of ways to find links inside any element. For example, you can simply write the desired selector , or use the methods find() , or children() which searches only among the descendants of the first level.

 $("ol.targetClassName a") //перечень ссылок внутри списка с классов targetClassName $("ol.targetClassName").find("a") // то же самое через find() 

Alternatively, determine that element is inside a specific class.

For these purposes, you must walk up the DOM tree. You can use the parents() method to return all parents with the desired selector, or closest() , which returns the closest node up the hierarchy that satisfies the condition. If such elements are found (the number found is greater than or equal to 1), then it is contained inside.

 var contains = element.closest(".cat-name").length == 1; var contains = element.parents(".cat-name").length > 0; 

Here element is a jQuery variable.

Just how can you define links of this type?

Regular expressions will help you in this matter. It is necessary to find all the links, and filter the obtained using the filter() collection method. This method as a parameter receives a reference to the callback function (callback), which directly performs filtering, returning true if the element is appropriate, and false otherwise. Based on this value, our link will or will not fall into the result. The simplest regular expression for the description of such a link will be /^\/index\/([\d-]+)$/i . In short, ^ and $ here denote the beginning and end of the line, \/ escaped slashes, index is the beginning of the link, and with the i flag at the end, the search will be case-insensitive, ([\d-]+) - a group of more than one character consisting of numeric values ​​of \d or minus sign. The entire expression before the flags is // . As I have already written, this is the simplest expression, so links like /index/0 , index/0-- , etc., will fall under it, but others will be filtered. Perhaps this is enough for your task.

The code below finds such links and replaces their test description.

 $("a").filter(function(idx, el){ var re = /^\/index\/([\d-]+)$/i; return re.test($(el).attr('href')); }).text("found!"); 

it is possible to slightly complicate the expression by writing (\d+\-){4}\d+ , such an expression will correspond to the mask of the four groups of dashes , and another number.

  • Thank you very much for your response. They described everything in great detail. Tell me, is it possible to replace the last example with such a record? element.href.indexOf('/index/0-0-0-1-13') > -1 ? That is, to extract all links on this scheme through .indexOf? - Alexander Goroshev
  • @AlexanderGoroshev indexOf() will tell you whether the link contains this particular line, but you need all the lines of this kind. - teran
  • The fact is that in the condition I refer to a specific link. We have an element (this is our link), there is a href and based on this particular link we build a condition. Through .classList or .indexOf I can easily disable any link, but the attempts to implement one of your options were not successful. Most likely, I simply make a wrong condition. Perhaps you write down your second example with the condition, as in the example from my question? - Alexander Goroshev
  • @AlexanderGoroshev I honestly do not understand what you want to do. Better in the question give an example of your html-markup, and describe what exactly you want to achieve. - teran
  • This is a barba.js script. This part describes the conditions under which clicking on a link does not reproduce the function. In the calling script, you can add your own logic of behavior when clicking, here it is described in more detail. That is, it does not take into account the search for links under certain conditions, namely, the verification of a specific link. There is a test case for trial and error. There are links to "About us" and editing in init-barba - Alexander Goroshev