Search and returned li element in JQuery - javascript

I have a ul of class items . The ul has li each of class item and different id example id1 id2 id3. We have a jquery code that select each item like below and perform action based on the selected or clicked linked.
$("#main-menu .items a").each(function () {
var url = new URL($(this).attr('href'));
if(url.is_in(that.page_url)) {
item = $(this).closest('.item');
}
});
Example like
<ul class="items">
<li id="id1" class="item"></li>
<li id="id2" class="item"></li>
<li>....</li>
My question is what would the item from the jquery code above return? My pages are separated by language, let say i want to set a value for item in the jquery code based on my language, how would i do that and what should my item look like? I tried below.
$("#main-menu .items a").each(function () {
var url = new URL($(this).attr('href'));
if(url.is_in(that.page_url) && page.language() === 'EN' && /\/text/.test(page.url)) {
item = "http://example.com/id2";
}
else{
if(url.is_in(that.page_url)) {
item = $(this).closest('.item');
}
}
});
Please where do i go wrong ? Any help would be appreciated.

Related

Filter list items after storing in variable

I am trying to store some list item into a variable and then loop through the variable and display only the list items that have a certain data attribute. It is worth mentioning that just using a simple show/hide on the li's on the page will not work for what I'm doing. https://jsfiddle.net/0jbnLv0k/
HTML:
<ul>
<li data-color="blue"></li>
<li data-color="red"></li>
<li data-color="green"></li>
<li data-color="blue"></li>
<li data-color="red"></li>
<li data-color="green"></li>
</ul>
<button class="blue">blue</button>
<button class="red">red</button>
<button class="yellow">yellow</button>
Jquery:
var items = $('ul li');
items.remove();
var result = $.grep(items, function(e){ return e.data == 'blue'; });
$('ul').html('<li>' + result + '</li>');
Problem is that
typeof e.data === 'undefined'
Solution is this:
var items = $('ul li');
items.remove();
var result = $.grep(items, function(e){
return $(e).attr('data-color') == 'blue';
});
$('ul').append( result );
But this is very bad end expensive ( time consuming ) way to display DOM elements. Much better would be add class with
display: none;
property.
Instead all this code you can use only one line:
$("li:not([data-color='blue'])").addClass('hide')
$("button").click(function() {
var getClass = $(this).attr("class");
$("ul").find("li").not("li[data-color="+getClass+"]").remove();
});
you could use not selector removing all list elements except the selected class.
https://jsfiddle.net/0jbnLv0k/5/

Get Values of sub elements of clicked class using jquery

I have a class amt and when that class is clicked I want to get the values of the clicked <h6>, <span> and <label> tags.
How do I do this in jquery? I have already seen a question here Get value of List Item with jQuery but it uses same under tag but i have to get different elemet value under same tag
<li class="amt" id="diecut_am1">
<h6>50</h6>
<span>$59.00</span>
<label>$51.30</label>
</li>
<li class="amt" id="diecut_am2">
<h6>100</h6>
<span>$68.00</span>
<label>$61.20</label>
</li>
Try this
$(".amt").click(function() {
var elem1 = $(this).find("h6").html();
var elem2 = $(this).find("span").html();
var elem3 = $(this).find("label").html();
alert(elem1);
alert(elem2);
alert(elem3);
});
https://jsfiddle.net/kLe5kLc3/1/
You could do something like this:
$( document ).ready(function() {
$('.amt').on("click", function() {
var h6 = $(this).find('h6').text();
var span = $(this).find('span').text();
var label = $(this).find('label').text();
});
});
Demo: https://jsfiddle.net/12q12k52/
here's the JS way :
var amt = document.querySelectorAll('.amt')
//add event listener to all .amt elements
var amtArr = [].slice.call(amt)
amtArr.forEach(function (x) {
x.addEventListener('click', listChilds, true)
});
//we retrive the target properties
function listChilds(e) {
console.log(e.path[1]) //all the children
//if you want one in particular it would be
console.log(e.target.childNodes[0])
}
<li class="amt" id="diecut_am1">
<h6>50</h6>
<span>$59.00</span>
<label>$51.30</label>
</li>
<li class="amt" id="diecut_am2">
<h6>100</h6>
<span>$68.00</span>
<label>$61.20</label>
</li>
You can iterate over the children of the clicked elements
$(this).children()

Combine cloned UL menus

I am cloning UL's from one element to another like so.
$( "#mobMenu li a" ).each(function(index) {
var subID = $(this).attr('id')
if (typeof(subID) !== "undefined") {
subID = "#sub_" + subID + " .subnav-menu"
var subMenu = $(subID).clone();
$(this).parent().append(subMenu);
}
});
Menu I am cloning:
<div id="sub_cat3">
<ul id="sub_cat" class="subnav-menu">
<li>..</li>
</ul>
<ul class="subnav-menu">
<li>..</li>
</ul>
</div>
Into a new mobile menu that looks like this:
<ul id="mobMenu">
<li><a id="cat3"></a>
// cloned menu to go here
</li>
</ul>
So ho can I combine each cloned ul into one UL?
<ul class="subnav-menu">
<li>..</li>
<li>..</li>
</ul>
I think you want something like this (had to contrive the HTML as a suitable example was not provided):
JSFiddle: http://jsfiddle.net/TrueBlueAussie/b10n5mf0/1/
or with your new HTML: http://jsfiddle.net/TrueBlueAussie/b10n5mf0/4/
$("#mobMenu li a").each(function (index) {
var subID = $(this).attr('id')
console.log(subID);
if (subID) {
subID = "#sub_" + subID + " .subnav-menu li"
var $div = $('<ul>').append($(subID).clone());
$(this).closest('li').append($div);
}
});
Notes:
It creates a single UL for each matching set of lists' LIs.
Only the matching LIs are cloned, then inserted under the created UL with append.
if (typeof(subID) !== "undefined") can be replaced with if (subID) as attr returns a string or undefined (and empty strings are treated as undefined by your code).
You can do...
var $subs = $('.subnav-menu'),
$lis = $subs.find('> li').clone();
// Add all the $lis to the first subnav...
$subs.eq(0).append($lis);
// Remove the rest of the subs...
$subs.slice(1).remove();
Here is a small demo: http://jsbin.com/jerapo/2/edit?js,output

jquery id selection change class

$('#sidebar ul li ul li').click(function () {
var ids = $(this).attr('id');
$('#ids').addClass('active');
$('#ids').parent('ul').parent('li').addClass('has-sub active');
alert(ids); // Will alert the id if the element has one
});
I didn't understand why this is not working. alert gives me the id of the li element but the 2 lines before it don't work I mean these 2:
$('#ids').addClass('active');
$('#ids').parent('ul').parent('li').addClass('has-sub active');
Where is the problem? Am I missing something?
You need to concatenate your variable like:
$('#' + ids).
$('#ids') is looking for an element with the ID of ids. And as Blender noted in the comments, why are you doing it this way? The element you're clicking on could be referred to as simply $(this) or this. To me it might make more sense to do:
$('#sidebar ul li ul li').click(function () {
$(this).addClass('active').parent('ul').parent('li').addClass('has-sub active');
});
And you might also be able to replace .parent('ul').parent('li') with .closest('li'), but I'd need to see the HTML structure to be sure.
You are taking the id of the current element to concatenate together a selector. Instead, you can use the this keyword within the handler and use it as a reference to the clicked element. Try this:
$('#sidebar ul li ul li').click(function () {
$(this).addClass('active').closest('li').addClass('has-sub active');
});
ids is a variable which holds the id of clicked element. and in your code:
$('#ids').addClass('active');
$('#ids').parent('ul').parent('li').addClass('has-sub active');
You use ids as a string. This is not correct way. You should replace $('#ids') with $('#' + ids).
Try this:
$('#' + ids).addClass('active');
$('#' + ids).parent('ul').parent('li').addClass('has-sub active');
Did you mean to apply the new classes to the ids in the variable ids? If so you are currently applying those to elements that have the id of 'ids'. You should use the following selector: $('#'+ids).
#IshanJain #RoryMcCrossan #j08691 #EliantenHolder thank you for your response. Jquery doesnt help to solve this problem but this helper worked.
public static class HtmlHelperExtensions
{
public static string ActivePage(this HtmlHelper htmlHelper,string controller, string action)
{
string _classValue="";
string _currentController = htmlHelper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString();
string _currentAction = htmlHelper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString();
if (_currentController == controller && _currentAction == action)
{
_classValue = "active";
}
else if (_currentController == controller && action.Equals(""))
{
_classValue = "has-sub active";
}
else
{
if (action.Equals(""))
{
_classValue = "has-sub";
}
}
return _classValue;
}
}
and this is from my layout page
<li class="#Html.ActivePage("Order","")">
<a href="javascript:;" class="">
<span class="icon-box"> <i class="icon-dashboard"></i></span> Sipariş Açma
<span class="arrow"></span>
</a>
<ul class="sub">
<li class="#Html.ActivePage("Order","Index")"><a class="" href="#Url.Action("Index","Order")">Sipariş</a></li>
<li class="#Html.ActivePage("Order","orderProduct")"><a class="" href="#Url.Action("orderProduct","Order")">Ürün Sipariş</a></li>
<li class="#Html.ActivePage("Order","orderCloth")"><a class="" href="#Url.Action("orderCloth","Order")">Kumaş Sipariş</a></li>
<li class="#Html.ActivePage("Order","orderAccessory")"><a class="" href="#Url.Action("orderAccessory","Order")">Aksesuar Sipariş</a></li>
</ul>
</li>

change class name with js

I have menu list that contains:
<ul class="content_menu tabs">
<li class="pager_link_0_active"></li>
<li class="pager_link_1"></li>
<li class="pager_link_2"></li>
<li class="pager_link_3"></li>
<li class="pager_link_4"></li>
<li class="pager_link_5"></li>
<li class="pager_link_6"></li>
<li class="pager_link_7"></li>
<li class="pager_link_8"></li>
</ul>
What I want to do is when particular link is clicked I need to remove active from li class name that contains active (e.g pager_link_0_active) and add active to the li that is clicked (e.g pager_link_2_active)
I know there is one way to make it:
$(".active").removeClass("active");
$(this).addClass("active");
but in my situation, active is not seperated, it is part of class name.
According to standards ul can contain only element but what you want can be achived these way:
$(function () {
$('ul.content_menu.tabs a.tab').click(function () {
var newActive = $(this);
if (newActive.hasClass('active')) {
return;
}
var oldActive = $('ul.content_menu.tabs a.tab.active');
oldActive.removeClass('active');
var oldIndex = $('ul.content_menu.tabs a.tab').index(oldActive);
oldActive.children().attr('class', 'pager_link_' + oldIndex);
var newIndex = $('ul.content_menu.tabs a.tab').index(newActive);
newActive.addClass('active');
newActive.children().attr('class', 'pager_link_' + newIndex + '_active');
});
});
Here is fiddle
It would be better to make it a separate class <li class="pager_link_1 pager_active">, then you can remove and add pager_active easily.
If the LI will always have just one class, try this:
var active_li = $(".active li");
var active_class = active_li.attr("class");
active_li.attr("class", active_attr.replace("_active", "");
var this_li = $(this).children("li");
var this_class = this_li.attr("class");
this_li.attr("class", this_class+"_active");

Categories