jQuery remove two element on var - javascript

var li = $('div.notification').parents("li");
var hr = li.next("hr");
li.remove();
hr.remove();
How to delete two elements in one time ? Like (li && hr).remove();
Thanks.

Just use add:
li.add(hr).remove()

$("li:has(div.notification), li:has(div.notification) + hr").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<div class="notification">notification</div>
</li>
<hr>
<li>
<div class="notification">notification</div>
</li>
<hr>
<li>
<div class="not-notification">not notification</div>
</li>
<hr>
</ul>

Related

Clone two elements and store them in one variable

As the title says is there a way I can clone two elements and store them in one variable instead of creating a separate variable. Tried using && to get both elements but didn't work
var menu = $('a[href$="/items"]').clone() && $('a[href$="/items"]').next().clone();
$('.footer .footer-menu').append(menu);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Item
<ul>
<li>item one</li>
</ul>
</li>
</ul>
<div class="footer">
this is a footer
<div class="footer-menu">
</div>
</div>
Here you go with an array solution https://jsfiddle.net/wrdp548d/
var menu = [];
menu.push($('a[href$="/items"]').clone());
menu.push($('a[href$="/items"]').next().clone());
$('.footer .footer-menu').append(menu);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Item
<ul>
<li>item one</li>
</ul>
</li>
</ul>
<div class="footer">
this is a footer
<div class="footer-menu">
</div>
</div>
Another way
var menu = [];
menu.push($('a[href$="/items"]').clone());
menu.push($('a[href$="/items"]').next().clone());
$.each(menu, function(i){
$('.footer .footer-menu').append(menu[i]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Item
<ul>
<li>item one</li>
</ul>
</li>
</ul>
<div class="footer">
this is a footer
<div class="footer-menu">
</div>
</div>
Here you go with an object solution https://jsfiddle.net/wrdp548d/1/
var menu = {
clone1: $('a[href$="/items"]').clone(),
clone2: $('a[href$="/items"]').next().clone()
};
for(var key in menu){
$('.footer .footer-menu').append(menu[key]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Item
<ul>
<li>item one</li>
</ul>
</li>
</ul>
<div class="footer">
this is a footer
<div class="footer-menu">
</div>
</div>
Hope this will help you.
A simple variable can only hold one value. If you need to hold more than one you either use an array or object.
Using array:
var clone1 = $('a[href$="/items"]').clone();
var clone2 = $('a[href$="/items"]').next().clone();
var menu = [clone1, clone2];
or object:
var clone1 = $('a[href$="/items"]').clone();
var clone2 = $('a[href$="/items"]').next().clone();
var menu = {'clone1': clone1, 'clone2': clone2};
Then you're going to have to access the values by looping thru it or directly accessing it via array index menu[0] or object properties menu.clone1 menu[clone1]

How to append li in ul under three div ul and li?

I want to get the li. Here is the code:
<div>
<div id="ulMenu">
<ul id="navMainTop">
<li>
<a></a>
<div>
<ul></ul>
</div>
</li>
<li>
<a class="top-menu-txt">
<i class="fa fa-offer"></i>Offers
</a>
<div class="grid-container3 blue-link" id = "serverside2">
<ul id= "serverside">
<!-- this one -->
</ul>
</div>
</li>
</ul>
</div>
</div>
i want to get the ul with id "serverside" using jQuery. Here's what I am trying:
var mJSul = '<%=myServerSideul%>';
$("#serverside").append(mJSul.toString());
But this code is not working. Could someone help me figure this out?
$( document ).ready(function() {
var mJSul = '<li><%=myServerSideul%></li>';
$("#serverside").append(mJSul);
});
Try this

How can I find first list of childrens with the same class from multiple levels

I have a small thing I hang up on.
I have this markup
<div class="menu-build-group"> <!-- Level 1 -->
<ul class="menu-build-items">
<li class="menu-build-item-wrapper">Level 1 Level 1 Level 1
<div class="menu-item-relative-wrap">
<div class="menu-build-item">
<div class="menu-item-handle">
<span class="menu-item-number">1</span>
</div>
</div>
</div>
<div class="menu-keypress">
<div class="menu-build-group">
<ul class="menu-build-items">
<li class="menu-build-item-wrapper">Level 2 Level 2 Level 2
<div class="menu-item-relative-wrap">
<div class="menu-build-item">
<div class="menu-item-handle">
<span class="menu-item-number">1.1</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="menu-build-item-wrapper">...</li>
<li class="menu-build-item-wrapper">...</li>
<li class="menu-build-item-wrapper">...</li>
<li class="menu-build-item-wrapper">...</li>
<li class="menu-build-item-wrapper">...</li>
</ul>
</div>
I am trying to change the menu-item-number just for the first level.
I used this code witch I know is not working in my case.
function changeSectionNumbers(triggerEl){
var sectionMenuGr = triggerEl.closest('.menu-build-group');
sectionMenuGr.find('.menu-build-item-wrapper').each(function(index){
var myIndex = index+1;
$(this).find('.menu-item-number').text(myIndex);
})
}
Is there any way I can get only the first level of elements "menu-build-item-wrapper" and change the menu-item-number text?
Try this:
<ul class="root-list menu-build-items">
<li class="menu-build-item-wrapper">Level 1 Level 1 Level 1
<div class="menu-keypress">
<div class="menu-build-group">
<ul class="menu-build-items">
<li class="menu-build-item-wrapper">Level 2 Level 2 Level 2
Please note the root-list class added to the first ul element
$("ul.root-list > li.menu-build-item-wrapper").each(function(index){
var myIndex = index+1;
$(this).find('.menu-item-number').text(myIndex);
});
you could wrap the outer most ul in a div eg
<div class="allitems">...</div>
Then you can use the the direct descendant operator: >
$(".allitems >
.menu-build-items >
.menu-build-item-wrapper >
.menu-item-relative-wrap >
.menu-build-item >
.menu-item-handle >
span");
Get the first level item by using below selector
$(".menu-build-group .menu-build-item-wrapper .menu-item-number:eq(0)")
Below loop to change text.
var count=1;
$(".menu-build-group .menu-build-item-wrapper .menu-item-number:eq(0)").
each( function( ) {
this.innerHTML=count;count++;
});

How to find nth p element?

I want to find the 3rd p tag of each category, based on first p tag's value.
e.g. The first p tag value is Tie, then find the quantity of it.
If the html element tree should be formatted in a better way, I am open to it. The html for all ul is written from code behind at C# to load items from database.
$("#wel div ").each(function(index, element) {
if ($(this).('p:nth-of-type(1)').html() == "Tie")
{
$(this).('p:nth-of-type(3)').css('background-color','red');
}
}
<div id="fel">Category1
<ul>
<li>
<div >
<p>Shirt</p>
<p>Price:$25</p>
<p>Quantity:20</p> <!--find this?-->
</div>
</li>
<li>
<div>
<p>Tie</p>
<p>Price:$10</p>
<p>Quantity:10</p>
</div>
</li>
<li>
<div>
<p>Trousers</p>
<p>Price:$50</p>
<p>Quantity:5</p>
</div>
</li>
</ul>
</div>
<div id="wel">Category2
<ul>
<li>
<div >
<p>Shirt</p>
<p>Price:$25</p>
<p>Quantity:20</p>
</div>
</li>
<li>
<div>
<p>Tie</p>
<p>Price:$10</p>
<p>Quantity:10</p><!--find this?-->
</div>
</li>
<li>
<div>
<p>Trousers</p>
<p>Price:$50</p>
<p>Quantity:5</p>
</div>
</li>
</ul>
</div>
JSFiddle
You can 2 top level elements with different ids fel and wel so need to use #wel div, #fel div to find the category div elements, then need to use .find() to find the p
$("#wel div, #fel div").each(function (index, element) {
if ($(this).find('p:nth-of-type(1)').html().trim() == "Tie") {
$(this).find('p:nth-of-type(3)').css('background-color', 'red');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="fel">Category1
<li>
<div>
<p>Shirt</p>
<p>Price:$25</p>
<p>Quantity:20</p>
<!--find this?-->
</div>
</li>
<li>
<div>
<p>Tie</p>
<p>Price:$10</p>
<p>Quantity:10</p>
</div>
</li>
<li>
<div>
<p>Trousers</p>
<p>Price:$50</p>
<p>Quantity:5</p>
</div>
</li>
</div>
<div id="wel">Category2
<li>
<div>
<p>Shirt</p>
<p>Price:$25</p>
<p>Quantity:20</p>
</div>
</li>
<li>
<div>
<p>Tie</p>
<p>Price:$10</p>
<p>Quantity:10</p>
<!--find this?-->
</div>
</li>
<li>
<div>
<p>Trousers</p>
<p>Price:$50</p>
<p>Quantity:5</p>
</div>
</li>
</div>
You can also do
$("#wel div, #fel div ").each(function (index, element) {
var $ps = $(this).find('p');
if ($ps.eq(0).html().trim() == "Tie") {
$ps.eq(2).css('background-color', 'red');
}
})
Demo: Fiddle
Here's the generic way of doing it
$(document).ready(function(){
var div = $('p:contains("Tie")').parent()
$('p:contains("Tie")').parent()
var price = $(div).find("p:contains('Price')").css('background-color','red');
console.log(price)
});
Please refer the fiddle here

How can I get the class of a parent element?

I would like to find the class of the parent element of the child with .current.
var currentli = $('.nav').find('a.current').parent().attr('class');
console.log(currentli);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>
but it always throws me undefined
NOTE: I don't know which a currently has .current which is why I have to use the .find() method.
Your code should already work, but it might be more reliable to access the property className instead:
jQuery(function($) {
console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>
This will work:
var currentli = $($('.nav').find('a.current')).parent().attr('class');
console.log(currentli);
I'm simply transforming the found collection into a jQuery object again.
See fiddle: http://jsfiddle.net/RaphaelDDL/wnW4u/
Ps.: If more than one a has class="current", only the first one will be retrieved.
jQuery(function($) {
console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>

Categories