the dom as the following:
<li class="category51">
<a class="drop" href="#">Data</a>
<div class="dropdown_2column align_left ">
<div class="col_1">
<ul>
<li class="level1">
<a href="#">
<span class="level1">Solutions1</span>
</a>
</li>
<li class="level1">
<a href="#">
<span class="level1">Solutions</span>
</a>
</li>
</ul>
</div>
</div>
</li>
i want to get Solutions1 and Solutions a lable. how should i do?i using:
var link = document.getElementsByClassName("category51").document.getElementsByTagName(ul).document.getElementsByTagName(li).document.getElementsByTagName(a).
what i want to achieve:
i want to disable the link by javascript.so i must bind an event to the a lable, now, i don't know how to locate it.
You could use Document.querySelecorAll.
var eles = document.querySelectorAll('li.level1 a'),
i;
for (i = 0; i < eles.length, i++) {
eles[i].onclick = function() {
//...
};
}
Related
I'm trying to create a const or a var for each array item using jQuery, below is my HTML
<div class="taxonomy-list">
<input type="hidden" id="filters-category">
<ul class="category-list ">
<li><a href="javascript:;" class="filter-link portfolio-cat-item cat-list_item active" data-slug="" data-id=""
data-taxtype="">All </a></li>
<li>
<a href="javascript:;" class="filter-link cat-list_item" data-slug="uncategorized" data-taxtype="category"
data-id="1">
Category </a>
<span class="remove"><i class="fas fa-times"></i></span>
</li>
</ul>
<input type="hidden" id="filters-post_tag">
<ul class="post_tag-list ">
<li><a href="javascript:;" class="filter-link portfolio-cat-item cat-list_item active" data-slug="" data-id=""
data-taxtype="">All </a></li>
<li>
<a href="javascript:;" class="filter-link cat-list_item" data-slug="tag-1" data-taxtype="post_tag"
data-id="3">
Tag 1 </a>
<span class="remove"><i class="fas fa-times"></i></span>
</li>
</ul>
</div>
and below is the js I'm trying to use
$('.taxonomy-list input').each(function(index, value) {
const tax_name = [jQuery('.taxonomy-list input')]
for (let i = 0; i < tax_name.length; i++) {
console.log(`tax-${index}: ${this.id}`);
}
});
What I'm willing to get is in below format
const tax_0 = jQuery('#filters-category').val().split(',');
const tax_1 = jQuery('#filters-post_tag').val().split(',');
there will be more tax-i coming up, so I need to create a new const for each of them
I have HTML
<div class="swiper-container instance-0" data-id="nav-slider">
<ul class="swiper-wrapper nav-content__list">
<li class=" swiper-slide nav-content__item">
<a class=" link link--ms" href="/news-stories/stories">
<span class="link__text">
Stories
</span>
</a>
</li>
<li class=" swiper-slide nav-content__item">
<a class=" link link--ms" href="/news-stories/multimedia">
<span class="link__text">
Multimedia
</span>
</a>
</li>
<li class=" swiper-slide nav-content__item">
<a class=" link link--ms" href="/news-stories/press-releases">
<span class="link__text">
Press releases
</span>
</a>
</li>
</ul>
</div>
My js:
const $navSlider = $('[data-id="nav-slider"]');
const $swiperInstances = [];
const $currentPath = window.location.pathname;
$navSlider.each(function (index, sliderElement) {
const $this = $(this);
$this.addClass(`instance-${index}`);
$swiperInstances[index] = new Swiper(sliderElement, {
slidesPerView: 'auto',
watchOverflow: true,
initialSlide: '2',
});
});
But initialSlide don't work for me.
$swiperInstances[index].slideTo(2) don't work too
I need set the default item in the swiperslider
you need to use .slideTo() in afterInit() event.
documentation
I'm trying to pass a hash to an URL to set a UIkit filter.
<div uk-filter="target:.js-filter">
<ul>
<li class="uk-active" uk-filter-control>All</li>
<li uk-filter-control="filter:[data-color='blue'];"></li>
<li uk-filter-control="filter:[data-color='white'];"></li>
</ul>
<ul class="js-filter">
<li data-color="blue"></li>
<li data-color="white"></li>
</ul>
</div>
So, for example, if I go to http://example.com/#white the thing shows only the white items (and the "white" filter control is active).
I couldn't find any clear example about how to achieve this with UIkit 3 (This one is about UIkit 2). Documentation seems unclear for a noob like me, for it's unclear what target and selActive options are refering to. However, I'm trying with the following:
<script>
document.addEventListener("DOMContentLoaded", function(event){
hash = document.location.hash;
console.log("Hash: " + hash);
if ( hash !== "" ) {
var filter = document.querySelector('.js-filter');
UIkit.filter( filter, {
target: 'li [data-color:' + hash + ']',
selActive: true,
});
}
});
</script>
But this throws a "Uncaught TypeError: Cannot read property 'children' of null" error.
Any help would be appreciated. :)
<div uk-filter="target:.js-filter">
<ul id="filter-bar">
<li class="uk-active" uk-filter-control>All</li>
<li uk-filter-control="filter:[data-color='blue'];"></li>
<li uk-filter-control="filter:[data-color='white'];"></li>
</ul>
<ul class="js-filter">
<li data-color="blue"></li>
<li data-color="white"></li>
</ul>
document.addEventListener("DOMContentLoaded", function(event){
hash = document.location.hash;
console.log("Hash: " + hash);
if ( hash !== "" ) {
var filter = document.querySelector('.js-filter');
var filterBar= document.querySelector('#filter-bar');
var activeFilter= document.querySelector('li [data-color:' + hash + ']');
UIkit.filter( filterBar, {
target: filter,
selActive: activeFilter,
});
}
});
I'm hear too late) But try this code. You need to pass your filter component first not your list.
The easiest way to achieve this is to check for hash in url and then find the href tag which filters the content ..then just programaticaly click it.
Complicated (and more proper) way would be to trigger the change like in your code, but as the default filter is applied on document load, you need to make sure to call your script's filter after UIKit's filter.
window.addEventListener("load", function(event) {
//hash = document.location.hash;
//console.log("Hash: " + hash);
//Let's assume the document.location.hash returns #white
hash = '#white';
if (hash !== "") {
//get the color subnav button
color = document.querySelector('a[href="'+hash+'"]');
//trigger the click event
color.click();
}
});
body {
background-color: #eee;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/js/uikit-icons.min.js"></script>
<div data-uk-filter=".js-filter">
<ul class="uk-subnav uk-subnav-pill">
<li uk-filter-control>All</li>
<li uk-filter-control="[data-color='white']">White</li>
<li uk-filter-control="[data-color='blue']">Blue</li>
<li uk-filter-control="[data-color='black']">Black</li>
</ul>
<ul class="js-filter uk-child-width-1-2 uk-child-width-1-3#m uk-text-center" uk-grid>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
</ul>
</div>
My case is like this
My view is like this :
<div class="form-group">
<div class="col-sm-10">
<ul class="list-inline list-photo">
#foreach($product->photos as $i => $photo)
<li id="thumbnail-view-{{$i}}" >
...
</li>
#endforeach
#for($i = count($product->photos); $i < 5; $i++)
<li id="thumbnail-upload-li-{{$i}}">
<a href="javascript:" class="thumbnail thumbnail-upload" id="thumbnail-view-{{$i}}">
<span class="fa fa-plus fa-2x"></span>
</a>
</li>
...
#endfor
</div>
</ul>
</div>
</div>
I want to add div before #for like this :
<div id="test">
#for($i = count($product->photos); $i < 5; $i++)
<li id="thumbnail-upload-li-{{$i}}">
...
</li>
...
#endfor
</div>
When I add div, the view becomes not tidy
I need to add div. So I want to call it from javascript
How can I solve the problem?
try to use span because div has a line break compare to span or another option is to use css to suite your needs
The reason your view "becomes not tidy", as you put it, is because you are producing invalid HTML. The only valid child of <ul> is an <li> element. You therefore have two choices, either use multiple lists and add a class/ID to each one, like this:
<ul class="list-inline list-photo thumbnail-view">
#foreach($product->photos as $i => $photo)
<li id="thumbnail-view-{{$i}}" >
...
</li>
#endforeach
</ul>
<ul class="list-inline list-photo thumbnail-upload">
#for($i = count($product->photos); $i < 5; $i++)
<li id="thumbnail-upload-li-{{$i}}">
<a href="javascript:" class="thumbnail thumbnail-upload" id="thumbnail-view-{{$i}}">
<span class="fa fa-plus fa-2x"></span>
</a>
</li>
...
#endfor
</ul>
Or you can apply a class to specific row(s) you want to select with JavaScript or CSS if you want to style them differently:
<ul class="list-inline list-photo">
#foreach($product->photos as $i => $photo)
<li id="thumbnail-view-{{$i}}" class="thumbnail-view">
...
</li>
#endforeach
#for($i = count($product->photos); $i < 5; $i++)
<li id="thumbnail-upload-li-{{$i}}" class="thumbnail-upload">
<a href="javascript:" class="thumbnail thumbnail-upload" id="thumbnail-view-{{$i}}">
<span class="fa fa-plus fa-2x"></span>
</a>
</li>
...
#endfor
</ul>
<div class="scrolling-items-wrapper">
<div class="menu" style="max-height: 105px;">
<div class="scrolling" style="width: 196px; max-height: 105px;">
<div class="scrolling-content">
<ul >
<li data-menuid="ABC_1">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_1</span>
</a>
</li>
<li data-menuid="ABC_2">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_2</span>
</a>
</li>
<li data-menuid="ABC_3">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_3</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Manual click :
Whenever that element is clicked manually it generates a dynamic ID.
Using jQuery :
I want to click a particular element suppose ABC_1 using jQuery.
When it is clicked it should generate the Dynamic ID.
Did you try this?
$( "li[data-menuid='ABC_1']" ).click()
If it doesn't work here is a list of all jquery selectors: https://api.jquery.com/category/selectors/
If you have al element with ID ABC_123, you can do this:
$(document).ready(function() {
$("#ABC_123").click(function () {
var newId = "ABC_"+new Date().getTime();
this.id= newId;
});
});
This will change the id of the element by adding the date in miliseconds. Then, do what you want with the new ID.