jquery onclick parent remove child action - javascript

Actually I'm really very sorry about my question, I'm not sure how to make attention or ask question about this kind of problem.
Please see my code 1st.
<div data-model="ABC123" id="product">Select a Product</div>
<ul id="lists">
<li data-product="P1">Product 1
<ul id="sublists">
<li data-item="it1">P1 Item 1</li>
<li data-item="it2">P1 Item 2</li>
<li data-item="it3">P1 Item 3</li>
<li data-item="it4">P1 Item 4</li>
</ul>
</li>
<li data-product="P2">Product 2
<ul>
<li data-item="it1">P2 Item 1</li>
<li data-item="it2">P2 Item 2</li>
<li data-item="it3">P2 Item 3</li>
<li data-item="it4">P2 Item 4</li>
</ul>
</li>
<li data-product="P3">Product 3</li>
<li data-product="P4">Product 4</li>
</ul>
<div id="codes">
<span class="code1"></span>
<span class="code2"></span>
<span class="code3"></span>
</div>
The jquery code is:
<script>$('#product').click(function () {
var pmodel = $(this).data('model');
$('.code1').empty().append(pmodel);
$('.code2').empty();
$('.code3').empty();
});
$('#lists li').click(function () {
var dmodel = $(this).data('product');
$('.code2').empty().append(dmodel);
});
$('#lists li ul li').click(function () {
var item = $(this).data('item');
$('.code3').empty().append(item);
});</script>
You may directly view this at http://codepen.io/alshedupur/pen/YqKGqV
Everything is work fine, but my problem is, when I trigger parent list item like: Product 1 / Product 2 / Product 3
In result I want to empty .code3 span
I try to use $('.code3').empty(); on 2nd action but if I use this, then 3rd action I mean sub list click function not work.
Please see my screenshot for clearly understand what I want:


You need to empty .code3 as well.
$('#product').click(function() {
var pmodel = $(this).data('model');
$('.code1').empty().append(pmodel);
$('.code2').empty();
$('.code3').empty();
});
$('#lists > li').click(function(e) {
e.stopPropagation();
var dmodel = $(this).data('product');
$('.code2').empty().append(dmodel);
$('.code3').empty();
});
$('#lists li ul li').click(function(e) {
e.stopPropagation();
var item = $(this).data('item');
var dmodel = $(this).parents("li").data('product');
$('.code2').empty().append(dmodel);
$('.code3').empty().append(item);
});
#product:hover,
li:hover {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-model="ABC123" id="product">Select a Product</div>
<ul id="lists">
<li data-product="P1">Product 1
<ul id="sublists">
<li data-item="it1">P1 Item 1</li>
<li data-item="it2">P1 Item 2</li>
<li data-item="it3">P1 Item 3</li>
<li data-item="it4">P1 Item 4</li>
</ul>
</li>
<li data-product="P2">Product 2
<ul>
<li data-item="it1">P2 Item 1</li>
<li data-item="it2">P2 Item 2</li>
<li data-item="it3">P2 Item 3</li>
<li data-item="it4">P2 Item 4</li>
</ul>
</li>
<li data-product="P3">Product 3</li>
<li data-product="P4">Product 4</li>
</ul>
<div id="codes">
<span class="code1"></span>
<span class="code2"></span>
<span class="code3"></span>
</div>

Related

Adding class to all and one indexed items in list

I have managed to get the click function to display the specific items to add class on click.
The behavior im looking for.
Index both list item types because they will have the same amount of items.
On primary-list-item click fire 3 and 4.
Add class hide to all items but the indexed primary-list-item clicked.
Add class to the specifically indexed controls-list-item clicked.
The code submitted doesnt quite index the clicks properly.
Examples and ideas welcome & thankyou in advance.
$('.primary-list-item').click(function(e) {
e.preventDefault();
$('.primary-list-item').removeClass('hide');
$('.controls-list-item').removeClass('show');
$(this).removeClass("hide");
$(this).removeClass("show");
var index = $(this).index();
$('.links-block-list').each(function() {
$('.primary-list-item', this).not(':eq(' + index+')').addClass('hide');
$('.controls-list-item', this).eq(index).addClass('show');
})
});
.hide {
display: none !important;
}
.show {
display: flex;
}
.primary-list-item {
display: flex;
}
.controls-list-item {
display: none;
}
a {
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links-block-list">
<li class="primary-list-item">List Item 1</li>
<li class="controls-list-item hide">List Item 1</li>
<li class="primary-list-item">List Item 2</li>
<li class="controls-list-item hide">List Item 2</li>
<li class="primary-list-item">List Item 3</li>
<li class="controls-list-item hide">List Item 3</li>
<li class="primary-list-item">List Item 4</li>
<li class="controls-list-item hide">List Item 4</li>
<li class="primary-list-item">List Item 5</li>
<li class="controls-list-item hide">List Item 5</li>
</ul>

Honestly, having a class hide and show gets confusing. "Show" should just be the absence of hide (or vice versa as you prefer).
Getting rid of that complexity makes the code much easier. You were of course missing the index variable which is just $(this).index() for the clicked item.
$('.primary-list-item').click(function(e) {
e.preventDefault();
var index = $('.links-block-list > .primary-list-item').index(this); // index of clicked item
$('.primary-list-item').not(this).addClass("hide"); // hide all other primary items
$('.controls-list-item').eq(index).removeClass('hide'); // unhide the same index from control list as clicked primary
});
$('#reset').click(function(){
$('.primary-list-item').removeClass("hide");
$('.controls-list-item').addClass("hide");
});
.hide {
display: none !important;
}
.primary-list-item {
display: flex;
}
a {
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links-block-list">
<ul class="links-block-list">
<li class="primary-list-item">List Item 1</li>
<li class="controls-list-item hide">List Item 1</li>
<li class="primary-list-item">List Item 2</li>
<li class="controls-list-item hide">List Item 2</li>
<li class="primary-list-item">List Item 3</li>
<li class="controls-list-item hide">List Item 3</li>
<li class="primary-list-item">List Item 4</li>
<li class="controls-list-item hide">List Item 4</li>
<li class="primary-list-item">List Item 5</li>
<li class="controls-list-item hide">List Item 5</li>
</ul>
</ul>
<button id="reset">reset</button>

jQuery - Expand Tree View up to selected node level

I am trying to expand the tree view up to selected node level. But I am not getting any idea about this please can any one help me on this.
For example We clicked on 'Parent d' in 'Category list' then expand 'Tree View List' up to 'Parent d' level for more details check Here
HTML
<h3>
Category list
</h3>
When click on any li expand tree list up to selected level
<ul id='category'>
<li li-id='1' id='1'>Parent 1</li>
<li li-id='2' id='2'>Parent 2</li>
<li li-id='3' id='3'>Parent 3</li>
<li li-id='4' id='4'>Parent 4</li>
<li li-id='5' id='5'>Parent c</li>
<li li-id='6' id='6'>Parent d</li>
<li li-id='7' id='7'>Parent a</li>
<li li-id='8' id='8'>Parent b</li>
<li li-id='9' id='9'>Parent e</li>
<li parent-id='5' li-id='10'>Parent x</li>
</ul>
Tree View List
<h3>
Node View
</h3>
<div class='tree'>
<ul id='ulCollapse'>
<li parent-id='0' li-id='1'>Parent 1</li>
<li parent-id='1' li-id='2'>Parent 2</li>
<li parent-id='1' li-id='3'>Parent 3</li>
<li parent-id='1' li-id='4'>Parent 4</li>
<li parent-id='3' li-id='5'>Parent c</li>
<li parent-id='3' li-id='6'>Parent d</li>
<li parent-id='2' li-id='7'>Parent a</li>
<li parent-id='4' li-id='8'>Parent b</li>
<li parent-id='4' li-id='9'>Parent e</li>
<li parent-id='5' li-id='10'>Parent x</li>
</ul>
</div>
jQuery
//$('#ulCollapse li').hide();
$('ul li').click(function(){
var nodeId = $(this).attr('li-id');
alert(nodeId);
})
var $ul = $('ul');
$ul.find('li[parent-id]').each(function() {
$ul.find('li[parent-id=' + $(this).attr('li-id') + ']')
.wrapAll('<ul />')
.parent()
.appendTo(this)
});
DEMO

I am not a javascript developer but, tried to solve your problem, here is the working demo
var $ul = $('ul');
$(document).ready(function() {
$ul.find('li[parent-id]').each(function() {
$ul.find('li[parent-id=' + $(this).attr('li-id') + ']').wrapAll('<ul />').parent().appendTo(this)
// not changed its your code still, but I need this only first time, so moved into document ready
});
});
$('ul#category li').click(function() {
$("#ulCollapse1").html(''); // I have created a new div section
$("ul").removeAttr('class'); // remove active classes
var nodeId = $(this).attr('id');
arrangeNodes(nodeId);
$("#ulCollapse1").html($(".active").parent().clone()); //get the marked elements first parent (which is 'li')
$("#ulCollapse").hide(); // hide the main treeview
});
function arrangeNodes(item) {
$ul.find('li[parent-id=' + item + ']').parent().closest("ul").addClass("active"); // find item and mark the first ul as active (selected)
}
Hope helps,

I don't fully understand what you're trying to achieve.
But maybe :lt() is what you're looking for
HTML
<h3>
Category list
</h3>
<ul id='category'>
<li li-id='1' id='1'>Parent 1</li>
<li li-id='2' id='2'>Parent 2</li>
<li li-id='3' id='3'>Parent 3</li>
<li li-id='4' id='4'>Parent 4</li>
<li li-id='5' id='5'>Parent c</li>
<li li-id='6' id='6'>Parent d</li>
<li li-id='7' id='7'>Parent a</li>
<li li-id='8' id='8'>Parent b</li>
<li li-id='9' id='9'>Parent e</li>
<li li-id='10' id='10'>Parent x</li>
</ul>
<br>
<br>
<h3>
Node View
</h3>
<div class='tree'>
<ul id='ulCollapse'>
<li parent-id='1'>
<ul>
<li>Parent 1</li>
</ul>
</li>
<li parent-id='2'>
<ul>
<li>Parent 2</li>
<li>Parent 3</li>
<li>Parent 4</li>
</ul>
</li>
<li parent-id='3'>
<ul>
<li>Parent c</li>
<li>Parent d</li>
<li>Parent a</li>
</ul>
</li>
<li parent-id='4'>
<ul>
<li>Parent b</li>
<li>Parent e</li>
</ul>
</li>
<li parent-id='5'>
<ul>
<li>Parent x</li>
</ul>
</li>
</ul>
</div>
JS
$cats = $("#category");
$tree = $("#ulCollapse");
$tree.children().hide();
$cats.on("click", "li", function() {
var nodeId = $(this).attr('li-id');
console.info("NODE ID: ", nodeId);
$tree.children().hide();
var maxEq = $tree.children("[parent-id='" + nodeId + "']").index();
maxEq < 0 && (maxEq = 0);
maxEq++; //LTE since :lte() doesn't exist
console.info("MAX EQ: ", maxEq);
$tree.children(":lt(" + maxEq + ")").show();
});
FIDDLE ==> https://jsfiddle.net/x45j4fx6/1/

How to fecth ID property of LI element under a div tag

I am new to CSS and JQUERY. I want to get all the ids of the LI elements in string under in a JS file to parse further.
<div id="editSortable">
<ul class="sortable-list ui-sortable">
<li id="TEXT_1">Test 1</li>
<li id="TEXT_2">Test 2</li>
<li id="TEXT_3">Test 3</li>
</ul>
</div>
I tried below solution but its returning the object and not able to convert it into String
var columns = [];
$(#editSortable+ ' ul.sortable-list').each(function(){
columns.push($(this).sortable('toArray').join(','));
});
Kindly suggest.

var columns = [];
$('#editSortable .sortable-list li').each((i, li) => columns.push(li.id))
console.log(columns)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editSortable">
<ul class="sortable-list ui-sortable">
<li id="TEXT_1">Test 1</li>
<li id="TEXT_2">Test 2</li>
<li id="TEXT_3">Test 3</li>
</ul>
</div>

How to open correct sublist in dropdown menu

I got a small Javascript menu problem.
I got a ul list that looks something like this.
<ul class="mainmenu">
<li class="sub-handle">
Item 1
<ul class="submenu">
<li class="sub-li">item 1-1</li>
<li class="sub-li">item 1-2</li>
<li class="sub-li">item 1-1</li>
</ul>
</li>
<li class="sub-handle">
Item 2
<ul class="submenu">
<li class="sub-li">item 2-1</li>
<li class="sub-li">item 2-2</li>
<li class="sub-li">item 2-1</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
I got php to add submenu-i++ and that works just fine. Now I have a Javascript drop down function that looks like this.
var sub_handle = $('.sub-handle');
var sub_nav_ul = $('nav .submenu');
var sub_nav_ul_li = $('nav .mainmenu .sub-li');
$(sub_handle).on('click', function(){
sub_nav_ul.toggleClass('showing-sub');
sub_nav_ul_li.toggleClass('smooth-anchor');
});
sub_nav_ul_li.on('click', function(){
sub_nav_ul.toggleClass('showing-sub');
});
The problem is that when I press any submenu all of my submenus open. I want Javascript somehow to count like php and see if submenu-i++ is pressed only that one expand.
I hope this is clear enough otherwise make a shout and I will try to explain futher.
Thanks in advance!

Get rid of the numbers in the classes, so all the sub-menus have ths same class. Then use DOM navigation methods to find the corresponding menu items to toggle.
var sub_handle = $('.sub-handle');
var sub_nav_ul_li = $('nav .mainmenu .sub-li');
sub_handle.on('click', function() {
$(this).find(".submenu").toggleClass('showing-sub');
$(this).find(".sub-li").toggleClass("smooth-anchor");
});
sub_nav_ul_li.on('click', function() {
$(this).parent().toggleClass('showing-sub');
});
.submenu {
display: none;
}
.submenu.showing-sub {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainmenu">
<li class="sub-handle">
Item 1
<ul class="submenu">
<li class="sub-li">item 1-1</li>
<li class="sub-li">item 1-2</li>
<li class="sub-li">item 1-1</li>
</ul>
</li>
<li class="sub-handle">
Item 2
<ul class="submenu">
<li class="sub-li">item 2-1</li>
<li class="sub-li">item 2-2</li>
<li class="sub-li">item 2-1</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

<ul class="mainmenu">
<li class="sub-handle sub-handle-1">
Item 1
<ul class="submenu">
<li class="sub-li">item 1-1</li>
<li class="sub-li">item 1-2</li>
<li class="sub-li">item 1-1</li>
</ul>
</li>
<li class="sub-handle sub-handle-2">
Item 2
<ul class="submenu">
<li class="sub-li">item 2-1</li>
<li class="sub-li">item 2-2</li>
<li class="sub-li">item 2-1</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
var sub_handle = $('.sub-handle');
var sub_nav_ul = $('nav .submenu');
var sub_nav_ul_li = $('.submenu .sub-li');
sub_handle.on('click', function(){
sub_handle.removeClass("showing-sub");
$(this).addClass('showing-sub');
sub_nav_ul_li.toggleClass('smooth-anchor');
});
sub_nav_ul_li.on('click', function(){
$(this).parent().removeClass('showing-sub');
});
Will something like this work:
Note: I had to edit some of the html.

You are toggling the class on all the subitems. What you should do is traverse from the clicked handle to get the corresponding subitems for that. Something like this would suffice:
$(sub_handle).on('click', function(){
$(this).find(sub_nav_ul).toggleClass('showing-sub');
$(this).find(sub_nav_ul_li).toggleClass('smooth-anchor');
});
sub_nav_ul_li.on('click', function(){
$(this).closest(sub_nav_ul).toggleClass('showing-sub');
});
This is in no way the best solution to this, but it should help.

Adding level depth to class of nested lists

I have nested lists like this:
<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<ul>
<li>sub-subitem1</li>
</ul>
</li>
</ul>
</li>
<li>item 3
<ul>
<li>subitem 1</li>
</ul>
</li>
</ul>
Is there any way I could add a class to the based on their depth level so the output is something like this?
<ul class="level-0">
<li>item 1</li>
<li>item 2
<ul class="level-1">
<li>subitem 1</li>
<li>subitem 2</li>
<ul class="level-2">
<li>sub-subitem1</li>
</ul>
</li>
</ul>
</li>
<li>item 3
<ul class="level-1">
<li>subitem 1</li>
</ul>
</li>
</ul>
I am new to jQuery, have tried this:
$("ul").each(function(index, element){$(element).attr("class", "level-" + index);});
...but it only counts the ul's based on their index. Any help is much appreciated!

Try this:
$('ul').each(function() {
var depth = $(this).parents('ul').length;
$(this).addClass('level-' + depth);
});
See http://jsfiddle.net/alnitak/YSZFm/

If you only have 3 levels, try this:
$('ul').addClass('level-0');
$('ul').find('ul').removeClass('level-0').addClass('level-1');
$('ul').find('ul').find('ul').removeClass('level-0').removeClass('level-1').addClass('level-2');
http://jsfiddle.net/fallen888/2rATE/
For a more dynamic solution, try this:
$("ul").each(function(index, element) {
var parents = $(this).parents('ul');
var level = -1;
if (parents.length > 0) {
var parentClass = $(parents.get(0)).attr('class');
level = parseInt(parentClass.substr(parentClass.indexOf('level-') + 6, 1));
}
$(this).addClass('level-' + (level + 1));
});
http://jsfiddle.net/fallen888/2rATE/1/

Categories

Resources