How to find nth p element? - javascript

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

Related

Remove various div according specific text in

I have this DOM and I want to make like a filter removing li according text included in h5 tag.
<div class="total">
<ul>
<li>
<h5>this super heroe is super cool: Clark Kent</h5>
</li>
</ul>
<ul>
<li>
<h5>I always wanted to be Batman</h5>
</li>
</ul>
<ul>
<li>
<h5>Somedays I will be transform as Spiderman </h5>
</li>
</ul>
<ul>
<li>
<h5>This women is incredible Catwoman</h5>
</li>
</ul>
<li>
<ul>
<h5>The worst character is Joker</h5>
</ul>
</li>
<ul>
<li>
<h5>Someone knows about Green Lantern </h5>
</li>
</ul>
</div>
I need to make a filter according string into this array which has not coma
let appDataTab = ["Clark Kent Catwoman Joker"]
My goal is to remove all li that its h5 doesn't content "Clark Kent" "Catwoman" and "Joker"
As you can see the appDataTab content these string with no separation.
Here is the updated code after adding additional code after validating from my end.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="total">
<ul>
<li>
<h5>this super heroe is super cool: Clark Kent</h5>
</li>
</ul>
<ul>
<li>
<h5>I always wanted to be Batman</h5>
</li>
</ul>
<ul>
<li>
<h5>Somedays I will be transform as Spiderman </h5>
</li>
</ul>
<ul>
<li>
<h5>This women is incredible Catwoman</h5>
</li>
</ul>
<ul>
<li>
<h5>The worst character is Joker</h5>
</li>
</ul>
<ul>
<li>
<h5>Someone knows about Green Lantern </h5>
</li>
</ul>
</div>
<script>
$(function () {
var prohibited = ['Clark Kent', 'Catwoman', 'Joker'];
$("li").each(function (index) {
var wordFound = false;
for (var i = 0; i < prohibited.length; i++) {
if ($(this).text().indexOf(prohibited[i]) > -1) {
wordFound = true;
break;
}
}
if (wordFound == false) {
$(this).parent().remove();
}
});
})
</script>
</body>
</html>
Your should first make it a regular comma seperated array, then look for the element and remove the li containing the element.
Steps are commented one by one:
$(document).ready(function () {
//Your array
var appDataTab = ["Clark Kent Catwoman Joker"];
//Split with more than 1 space (2 space)
var appDataSplit = appDataTab[0].split(" ");
//Remove empty elements
var filtered = appDataSplit.filter(function (el) {
return el != "";
});
//Trim elements from extra spaces
var cleanFiltered = [];
for (i=0; i < filtered.length; i++){
cleanFiltered.push(filtered[i].trim());
}
console.log(cleanFiltered);
//look for any li containing the words in cleanFilter array
$("li").each(function(){
for (i=0; i < cleanFiltered.length;i++){
if ($(this).text().indexOf(cleanFiltered[i]) > -1) {
$(this).remove();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="total">
<ul>
<li>
<h5>this super heroe is super cool: Clark Kent</h5>
</li>
</ul>
<ul>
<li>
<h5>I always wanted to be Batman</h5>
</li>
</ul>
<ul>
<li>
<h5>Somedays I will be transform as Spiderman </h5>
</li>
</ul>
<ul>
<li>
<h5>This women is incredible Catwoman</h5>
</li>
</ul>
<ul>
<li>
<h5>The worst character is Joker</h5>
</li>
</ul>
<ul>
<li>
<h5>Someone knows about Green Lantern </h5>
</li>
</ul>
</div>

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

jQuery remove two element on var

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>

How to delete an element which does not have a certain parent?

I want to delete list items who do not have a parent of ul
This is my HTML:
<div class="yamm-content">
<div class="row">
<li> Should be deleted
</li>
<li> Should be deleted
</li>
<ul id="randomid" class="col-xs-12 col-sm-4">
<li> menu item
</li>
<li> menu item
</li>
<li> menu item
</li>
</ul>
<ul id="randomid2" class="col-xs-12 col-sm-4">
<li> menu item
</li>
<li> menu item
</li>
<li> menu item
</li>
</ul>
</div>
</div>
and my current script:
if (!$('.nav .yamm-content row li').closest('ul').length == 0) {
$(this).remove();
}
jsFiddle
The first two list items don't have ul's as parents. So they should be deleted.
Simple: $('li:not(ul > li)').remove();
Demo http://jsfiddle.net/46NdQ/3/
$('li').filter(function(){return !$(this).closest('ul').length}).remove();
Or
$('li').not($('ul li')).remove();
Here i used Javascript only and it may take some lines of coding. I suggest this may be useful some times when you don't want to go for jquery.
var len = document.getElementsByTagName('li').length;
for (var i=0;i<len;i++)
{
if (document.getElementsByTagName('li')[i].parentNode.nodeName != "UL")
{
document.getElementsByTagName('li')[i].remove();
i--;
}
}
Here is the fiddle

How to close all elements that are opened with jquery? (Behavior similar to the accordion menu)

I have this html code:
<div id="menu">
<ul id="menuFuncionalidades">
<li>
<div class="menuFuncionalidades_categoria">
Index</div>
</li>
<li>
<div class="menuFuncionalidades_categoria">
Cadastros</div>
<div class="menuFuncionalidades_content_links">
<div class="menuFuncionalidades_content_links_descricao">
<span class="menuFuncionalidades_content_links_descricao_titulo">Descrição</span>
<div class="menuFuncionalidades_content_links_descricao_texto">
Lorem Ipsum...
</div>
</div>
<div class="menuFuncionalidades_content_links_links">
<ul><b>Acesso Usuario</b>
<li>Pesquisar </li>
<li>Incluir </li>
<li>Alterar </li>
<li>Consultar </li>
</ul>
<ul><b>Produto</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul><b>Perfil</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
</div>
</div>
</li>
<li>
<div class="menuFuncionalidades_categoria">
Coletores</div>
<div class="menuFuncionalidades_content_links">
<div class="menuFuncionalidades_content_links_descricao">
<span class="menuFuncionalidades_content_links_descricao_titulo">Descrição</span>
<div class="menuFuncionalidades_content_links_descricao_texto">
Lorem Ipsum...
</div>
</div>
<div class="menuFuncionalidades_content_links_links">
<ul>
<b>Coletor 1</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul>
<b>Coletor 2</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul>
<b>Coletor 3</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
</div>
</div>
</li>
</ul>
</div>
My objective is when i click in a menuFuncionalidades_categoria i close all menuFuncionalidades_content_links that is opened, and opened the right one that is in the same level of the menuFuncionalidades_categoria that i click. So, i try this, but i have no success:
$(document).ready(function () {
$('#menuFuncionalidades > li > .menuFuncionalidades_categoria').click(function () {
$("#menu").children().find('.menuFuncionalidades_content_links').each(function () {
// I need a code here to close only the tags that are opened but is not the current
if ($(this).css('display') == 'block') {
$(this).hide();
}
});
$(this).parent().find('.menuFuncionalidades_content_links').slideToggle('normal').css('width', $('#menu').css('width'));
});
});
What am i missing or doing wrong?
OBS: The behavior that i want, is similar with accordion menu.
DEMO here: http://fiddle.jshell.net/ry9dz/1/
As #karim79 says, you can't check "display" that way - it's a css attribute, not an html attribute.
On the other hand, if you want to close all other entries, then just do that - no need to check if they are visible first! I also suggest you use a more efficient event handler for all your items, instead of binding it to all of them. Using jQuery 1.7, something like this would work:
$(document).ready(function () {
$("#menuFuncionalidades").on("click", ".menuFuncionalidades_categoria", function(event) {
var selectedMenu = $(event.target).parents("li").find(".menuFuncionalidades_content_links")
, visible = selectedMenu.is(":visible");
// Hide all others
$("#menuFuncionalidades .menuFuncionalidades_content_links").hide();
// Show this one unless it was already visible
if(!visible) {
selectedMenu
.slideToggle('normal')
.css('width', $('#menu').css('width'));
}
// Prevent the default action
event.preventDefault();
});
});
You can hide multiple elements without iterating though all of them to see which ones aren't hidden.
Replace;
$("#menu").children().find('.menuFuncionalidades_content_links').each(function () {
if ($(this).attr('display') == 'block') {
$(this).hide();
}
});
with;
$("#menu").find('.menuFuncionalidades_content_links').hide();
$(this).attr('display') is invalid as there are no "display" attribute and instead of using .css('display') == 'block' you could simply use the psuedo selector :visible.
You want the display css property:
if ($(this).css('display') == 'block') {
$(this).hide();
}
or:
if ($(this).is(':visible')) {
$(this).hide();
}

Categories