use wildcard to find specific ID using javaScript - javascript

I want to run a script where I can specifically select ID tag where parameters are _string_n_n where '_string' = release (in this case) and 'n' = are numbers # e.g. _release_8_3
Here's my code... where I wan to run the script and get content of tag where ID matches _string_n_n
<div class="sect2">
<h3 id="_release_8_3">Release 8.3</h3>
<div class="sect3">
<h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest">QA TEST release 1.2.4 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest">QA TEST release 1.2.3 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_release_8_3_1">QA release 8.3.1</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
<li>
<p>Bugs fixed in this release</p>
</li>
<li>
<p>Package updates:</p>
<div class="literalblock">
<div class="content">
<pre>user-portal 8.2</pre>
</div>
</div>
</li>
<li>
<p>Database migration scripts to run:</p>
<div class="literalblock">
<div class="content">
<pre>none</pre>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_release_8_2">Release 8.2</h3>
<div class="sect3">
<h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest_2">QA TEST release 1.2.4 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest_2">QA TEST release 1.2.3 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_release_8_2_6">QA release 8.2.6</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
<li>
<p>Bugs fixed in this release</p>
</li>
<li>
<p>Package updates:</p>
<div class="literalblock">
<div class="content">
<pre>user-portal 8.2</pre>
</div>
</div>
</li>
<li>
<p>Database migration scripts to run:</p>
<div class="literalblock">
<div class="content">
<pre>none</pre>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>

Select all elements with an ID containing the following string (in this case _release_:
document.querySelectorAll("[id*='_release_']");
In jQuery: $("[id*='_release_']")
Here are more wildcards if you need a different reaction.
console.dir(document.querySelectorAll("[id*='_release_']"))
<div class="sect2">
<h3 id="_release_8_3">Release 8.3</h3>
<div class="sect3">
<h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest">QA TEST release 1.2.4 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest">QA TEST release 1.2.3 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_release_8_3_1">QA release 8.3.1</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
<li>
<p>Bugs fixed in this release</p>
</li>
<li>
<p>Package updates:</p>
<div class="literalblock">
<div class="content">
<pre>user-portal 8.2</pre>
</div>
</div>
</li>
<li>
<p>Database migration scripts to run:</p>
<div class="literalblock">
<div class="content">
<pre>none</pre>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_release_8_2">Release 8.2</h3>
<div class="sect3">
<h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest_2">QA TEST release 1.2.4 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest_2">QA TEST release 1.2.3 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_release_8_2_6">QA release 8.2.6</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
<li>
<p>Bugs fixed in this release</p>
</li>
<li>
<p>Package updates:</p>
<div class="literalblock">
<div class="content">
<pre>user-portal 8.2</pre>
</div>
</div>
</li>
<li>
<p>Database migration scripts to run:</p>
<div class="literalblock">
<div class="content">
<pre>none</pre>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>

e.g. _release_8_3
var string = 'release';
var number1 = 8;
var number2 = 3;
var selector = '#_'+ [ string, number1, number2 ].join( '_' );
var element = $(selector);
element = document.querySelector(selector);
element = document.getElementById('_'+ [ string, number1, number2 ].join( '_' ) );
Have you tried any of these?
If instead you are wanting to find all ids that match a pattern, use a class instead. You can do pattern matching in lookups, however it is less performant and javascript will have to examine every single element in the dom to see if it matches your attribute pattern. Instead by giving like patterned id elements the same class, you can perform a class lookup which, along with id and tagName lookups, are some of the fastest lookups your browser can perform.
Otherwise if you feel you absolutely must do this, I would instead try to steer you towards using one of the more efficient selectors, and then using filter to find what you want. For instance in your example it looks like the pattern you gave is associated with h3 elements, so you could do.
$('h3').filter(function(){
return /^[_]release[_][0-9]+[_][0-9]+$/.test(this.id);
});
Provided I got my regex right, this would find all the h3 elements and then filter to return only those that match the pattern _release_#_# where # is any number

Related

Selecting an element with JavaScript (z-index)

I want from among the boxes that I put in the code below; Select a box whose z-index is equal to 3 and make its background red to distinguish it from other boxes.
html:
<ul>
<li class="post1">
<div class="content">
<h4 class="title">title post1</h4>
</div>
</li>
<li class="post2">
<div class="content">
<h4 class="title">title post2</h4>
</div>
</li>
<li class="post3">
<div class="content">
<h4 class="title">title post3</h4>
</div>
</li>
<li class="post4">
<div class="content">
<h4 class="title">title post4</h4>
</div>
</li>
<li class="post5">
<div class="content">
<h4 class="title">title post5</h4>
</div>
</li>
</ul>
For this purpose I wrote a script code that does not work. Please edit this code for me:
script:
$("li").each(function(){
var a=$(this).find("li");
$(this).css('z-index',3);
a.style.background= "red";
});
This should work
$("li").each(function(index){//goes througth li elements
if($(this).css("z-index") == 3){//if zindex equals 3
$(this).css("background-color","red");//set back ground to red
}
});

Why is my website displaying <ul> and <li> in the dom

I'm trying to display cards in my dom but in the text im showing there is some code as shown in the picture below
<div class="app">
<h1> All Fishes and Their Photos</h1>
<ul v-for="(fish, i) in fishes" :key="i" />
<li>
<div class="maincontainer">
<div class="back">
<p>{{fish['Biology']}}</p>
</div>
<div class="front">
<div class="image">
<img :src="fish['Species Illustration Photo'].src" />
<h2>{{ fish['Species Name']}}</h2>
</div>
</div>
</div>
</li>
</ul>
</div>
Remove the '/' you have at the end of the first <ul> tag, this should fix the problem, but also consider using the v-for on the <li> tag, and not the <ul> tag as
the element that must be repeated many times is <li>.

Custom tabs jumps to the top on click

I have these tabs working with no issues. The only thing is every time I click on each tab the page moves to the top. Is there any way of stopping this?
I have read previous posts and I thought the issue was to do with having <a href="#" so I have removed this. So now it is using data-tab but its still jumping to the top.
$('ul.tabs__list li').click(function(){
var tab_id = $(this).attr('data-tab'), $ct = $(this).closest('.tabs');
$ct.find('ul.tabs__list li.current').removeClass('current');
$ct.find('.tabs__content.current').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
$(window).trigger('resize');
});
HTML
<div class="tabs tabs--hero">
<div class="container">
<ul class="tabs__list clear">
<li class="tabs__list--item ademi caps align-center current" data-tab="panel-1">
Containment strategy
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-2">
Aseptic Systems
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-3">
Standard Systems
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-4">
Mobile Clean Rooms
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-5">
Spare Parts
</li>
</ul>
</div>
<div class="section background--white">
<div class="container">
<div id="panel-1" class="tabs__content current">
<div class="group">
<div class="col4">
<div class="feature">
<h2 class="ademi delta primary caps line line__left line--secondary">Restricted Access Barrier Systems (RABS)</h2>
<p class="beta beta--leading">Our innovative RABS provide protection by delivering a physical and aerodynamic barrier over a critical process zone with easier access to the process in the event when intervention is required and can be used for many applications in a fill finish area.</p>
View Products<i class="icon icon-rounded-arrow-pointing-to-the-right beta"></i>
</div>
</div>
<div class="col8">
<div class="feature__slider">
<ul class="slideshow">
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
<p class="slideshow__caption alpha">Designed to provide an ergonomic and practical alternative More Details</p>
<p class="vertical-text slideshow__vertical-text alpha caps">Cell Therapy</p>
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="panel-2" class="tabs__content">
Aseptic Systems content
</div>
<div id="panel-3" class="tabs__content">
Standard Systems content
</div>
<div id="panel-4" class="tabs__content">
Mobile Clean Rooms content
</div>
<div id="panel-5" class="tabs__content">
Spare Parts content
</div>
</div>
</div>
</div>
I think no problem in your TAB js code. just add e.preventDefault();.
$('ul.tabs__list li').click(function(e){
e.preventDefault();
//code goes here.
}
add to function argument e and inside function write e.preventDefault();

Manage complex select/deselect artis/album/song

First of all sorry for the vague title, but i didn’t know how to explain my problem in a better way.
Anyway this is what i want. Let’s say we have three tabs: one showing artist list, one showing album list and one showing songs. All this three tabs has selectable lists and i would like to be able, for example, to select and artist, then going to albums (that now should be show all as selected because i checked the artis) and be able to deselect one album and then, for, example, be able to go to songs and manage the songs individually.
Of course then i should be able to retrive the list of all the songs selected by the user.
EDIT 1
added two images to explain better
EDIT 2
Added some code. At the moment i have only HTML and CSS, i'm waiting for your help for the JS code :)
that's the HTML structure
<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
<div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro1">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 1</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro2">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 2</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block-title">Seleziona Album</div>
<div class="list-block media list">
<div class="list-group">
<ul>
<li class="list-group-title">Artist 1</li>
<li id="titoliLibro1">
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 1</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 2</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block-title">Seleziona song</div>
<div class="list-block searchbar-not-found">
<ul>
<li class="item-content">
<div class="item-inner">
CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
</div>
</li>
</ul>
</div>
</div>
Edit 3
It's a phonegap application and yes, already using jQuery (as less as possibile for performance) :)
Now my question: which is the best way to handle this? My only idea is to create an array and update it with all the elements selected and, in order to show an element as selected or not, checking it with indexOf to see if it exist… is this a good way? I’m a bit worried about performance.
Thanks

How can I separate div from another class?

In my WordPress based website a plugin automatically wraps every element in the post content with <ul></ul>. That wraps everything even the <div>s which is invalid.
I want to unwrap certain elements and tried jQuery .unwrap . But I am able to unwrap some elements except a few div elements.
Here is the code:
<div class="post-content">
<p>Example post content</p>
<ul class="plugin_class">
<li>test</li>
<li>test</li>
<ul>
<div class="button-main-wrap">
<span class="button-abc">
<span>
Website link
</span>
</span>
<span class="button-abc"></span>
<span class="button-abc"></span>
</div>
</ul>
<ul>
<div class="number">hundred</div>
<div class="number">thosand</div>
</ul>
</ul>
<div>
<div>This content is okay</div>
<div>This content is okay</div>
</div>
</div>
From the above code, I want to separate <div class="button-main-wrap"> from <ul class="plugin_class"> or stop the <ul class="plugin_class"> to wrap elements which doesn't belong to it. ex: the div <div class="button-main-wrap"> or other elements like <div class="number">.
I tried these:
jQuery("ul").find('.button-main-wrap').unwrap();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-content">
<p>Example post content</p>
<ul class="plugin_class">
<li>test</li>
<li>test</li>
<ul>
<div class="button-main-wrap">
<span class="button-abc">
<span>
Website link
</span>
</span>
<span class="button-abc"></span>
<span class="button-abc"></span>
</div>
</ul>
<ul>
<div class="number">hundred</div>
<div class="number">thosand</div>
</ul>
</ul>
<div>
<div>This content is okay</div>
<div>This content is okay</div>
</div>
</div>
This unwraps all the <ul> elements in .post-content which I don't want.
jQuery(".plugin_class").find('.button-main-wrap').unwrap();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-content">
<p>Example post content</p>
<ul class="plugin_class">
<li>test</li>
<li>test</li>
<ul>
<div class="button-main-wrap">
<span class="button-abc">
<span>
Website link
</span>
</span>
<span class="button-abc"></span>
<span class="button-abc"></span>
</div>
</ul>
<ul>
<div class="number">hundred</div>
<div class="number">thosand</div>
</ul>
</ul>
<div>
<div>This content is okay</div>
<div>This content is okay</div>
</div>
</div>
This doesn't do anything.
I put all the code together in this Fiddle.
How to separate the div and stop the to wrap elements un-necessarily?
It is because div is not a valid child of ul, so wrap the contents of the ul with li then unwrap the li elements so that the parent ul will get removed
$('.plugin_class > ul').each(function(){
$(this).wrapInner('<li />').contents().unwrap()
})
Demo: Before, After

Categories