How can I select a box which has specific text? - javascript

I have this HTML:
<h5>something</h5>
<ul>
<li class="name">John</li>
<li class="age">21</li>
</ul>
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
<h5>something else</h5>
<ul>
<li class="name">Ali</li>
<li class="age">62</li>
</ul>
I want to select this part:
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
The logic is the content of <h5> tag. I want the one which is specific text. Actually expected result is an array of both that name and that age. Some thing like this: var res = ['Peter', 19];.
But my code selects all those <ul>s:
$('ul').map(function (){
var res = [$(this).find('li.name').text(), $(this).find('li.age').text()];
});
How can I fix it?


You can use :contains() to find the H5 that contains the specific string you want. Then use .next() to get that ul associated with the h5
$("h5:contains('specific text')").next('ul').map(function (){
var res = [$(this).find('li.name').text(), $(this).find('li.age').text()];
console.log(res)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5>something</h5>
<ul>
<li class="name">John</li>
<li class="age">21</li>
</ul>
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
<h5>something else</h5>
<ul>
<li class="name">Ali</li>
<li class="age">62</li>
</ul>


Jquery script for getting data from ul list :
$('ul').map(function (){
var res = [$(this).find('li.name').text(), $(this).find('li.age').text()];
// console.log(res);
});
var htmVal = '';
$('h5').each(function(index){
htmVal = $(this).html();
if(htmVal == 'something else'){
var detail ={name:$(this).next().find('li.name').html(),age:$(this).next().find('li.age').html()};
console.log(detail);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5>something</h5>
<ul>
<li class="name">John</li>
<li class="age">21</li>
</ul>
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
<h5>something else</h5>
<ul>
<li class="name">Ali</li>
<li class="age">62</li>
</ul>

Related

What part of this jQuery .replace is not working?

I've read at least, ten different similar topics but haven't been able to figure out, what the problem is.
I am trying to change, part the url's in my header menu. Those url's, which contains "onepage" should be replaced with a hashtag.
<ul>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-32gb"><span>iPhone 32GB</span></a>
</li>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-64gb"><span>iPhone 64GB</span></a>
</li>
</ul>
$('$('a[href*="onepage"]')').each(function() {
var text = $(this).text();
$(this).text(text.replace(new RegExp("onepage","g"), "#");
});
JSFiddle
$('$('a[href *= "onepage"] ')').each(function() {
var text = $(this).text();
$(this).text(text.replace(new RegExp("onepage", "g"), "#");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-32gb"><span>iPhone 32GB</span></a>
</li>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-64gb"><span>iPhone 64GB</span></a>
</li>
</ul>

You should change the href instead of the text. Also, you have your css selector wrong.
$('a[href*="onepage"]').each(function() {
var href = $(this).prop("href");
// change the property href to new url
$(this).prop("href", href.replace(new RegExp("onepage", "g"), "#"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-32gb"><span>iPhone 32GB</span></a>
</li>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-64gb"><span>iPhone 64GB</span></a>
</li>
</ul>

You could use plain javascript to change the href property, see following please:
$('a[href*="onepage"]').each(function() {
this.href = this.href.replace(/onepage/, "#");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-32gb"><span>iPhone 32GB</span></a>
</li>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-64gb"><span>iPhone 64GB</span></a>
</li>
</ul>

$('a[href*="onepage"]').each(function() {
var str = $(this).attr('href').replace(/onepage/, "#");
$(this).attr('href',str);
});
or
$('a[href*="onepage"]').attr( "href", function( i, val ) {
return val.replace(/onepage/, "#");
});

Onclick convert UL to JSON

On my webpage I have an area that summarizes multiple stores. Each store is a list with multiple list items.
<div id="dealersList" class="dealer-summary">
<ul class="dealer-summary-list">
<li class="dealerName">Brecksville</li>
<li class="dealer-summary-listItem">8383 Chippewa Rd.,</li>
<li class="dealer-summary-listItem">Brecksville, Ohio - 44141</li>
<li class="dealer-summary-listItem">(440) 740-0535</li>
</ul>
<ul class="dealer-summary-list">
<li class="dealerName">Dayton</li>
<li class="dealer-summary-listItem">3520 W Siebenthaler Ave.,</li>
<li class="dealer-summary-listItem">Dayton, Ohio - 45406</li>
<li class="dealer-summary-listItem">(937) 567-9578</li>
</ul>
<ul class="dealer-summary-list">
<li class="dealerName">Cleveland</li>
<li class="dealer-summary-listItem">900 Euclid Ave.,</li>
<li class="dealer-summary-listItem">Cleveland, Ohio - 44115</li>
<li class="dealer-summary-listItem">(216) 302-3020</li>
</ul>
<ul class="dealer-summary-list">
<li class="dealerName">Bridgetown</li>
<li class="dealer-summary-listItem">5830 Harrison Ave.,</li>
<li class="dealer-summary-listItem">Cincinnati, Ohio - 45248</li>
<li class="dealer-summary-listItem">(513) 574-2810</li>
</ul>
<ul class="dealer-summary-list">
<li class="dealerName">Columbus</li>
<li class="dealer-summary-listItem">1350 N High St.,</li>
<li class="dealer-summary-listItem">Columbus, Ohio - 43201</li>
<li class="dealer-summary-listItem">(614) 294-2545</li>
</ul>
<ul class="dealer-summary-list">
<li class="dealerName">Toledo</li>
<li class="dealer-summary-listItem">1415 S Byrne Rd.,</li>
<li class="dealer-summary-listItem">Toledo, Ohio - 43614</li>
<li class="dealer-summary-listItem">(419) 382-0792</li>
</ul>
</div>
</div>
I would like to click any List and have it converted to a JSON similar to this
Object
address:"8383 Chippewa Rd.,"
locale:"Brecksville, Ohio - 44141"
phone:"(440) 740-0535"
title:"Brecksville"
I've tried multiple times with incorrect results...
var dealerSummary = [];
$("ul.dealer-summary-list > li").each(function () {
dealerSummary.push({
"title": $(this).text(),
"address": $(this).text(),
"locale": $(this).text(),
"phone":$(this).text()
});
})
Only the clicked item should be converted. Please help.

Assuming your li tags are always in the same order: title, address, locale, phone, you can do this with a simple find() and then concatenate the text of the li into an object.
Here's an example:
$("#dealersList").on("click", "ul", function() {
var obj = {};
var items = $(this).find("li");
obj.title = items.eq(0).text();
obj.address = items.eq(1).text();
obj.locale = items.eq(2).text();
obj.phone = items.eq(3).text();
console.log(obj);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dealersList" class="dealer-summary">
<ul class="dealer-summary-list">
<li class="dealerName">Brecksville</li>
<li class="dealer-summary-listItem">8383 Chippewa Rd.,</li>
<li class="dealer-summary-listItem">Brecksville, Ohio - 44141</li>
<li class="dealer-summary-listItem">(440) 740-0535</li>
</ul>
<ul class="dealer-summary-list">
<li class="dealerName">Dayton</li>
<li class="dealer-summary-listItem">3520 W Siebenthaler Ave.,</li>
<li class="dealer-summary-listItem">Dayton, Ohio - 45406</li>
<li class="dealer-summary-listItem">(937) 567-9578</li>
</ul>
<ul class="dealer-summary-list">
<li class="dealerName">Cleveland</li>
<li class="dealer-summary-listItem">900 Euclid Ave.,</li>
<li class="dealer-summary-listItem">Cleveland, Ohio - 44115</li>
<li class="dealer-summary-listItem">(216) 302-3020</li>
</ul>
<ul class="dealer-summary-list">
<li class="dealerName">Bridgetown</li>
<li class="dealer-summary-listItem">5830 Harrison Ave.,</li>
<li class="dealer-summary-listItem">Cincinnati, Ohio - 45248</li>
<li class="dealer-summary-listItem">(513) 574-2810</li>
</ul>
<ul class="dealer-summary-list">
<li class="dealerName">Columbus</li>
<li class="dealer-summary-listItem">1350 N High St.,</li>
<li class="dealer-summary-listItem">Columbus, Ohio - 43201</li>
<li class="dealer-summary-listItem">(614) 294-2545</li>
</ul>
<ul class="dealer-summary-list">
<li class="dealerName">Toledo</li>
<li class="dealer-summary-listItem">1415 S Byrne Rd.,</li>
<li class="dealer-summary-listItem">Toledo, Ohio - 43614</li>
<li class="dealer-summary-listItem">(419) 382-0792</li>
</ul>
</div>

You can add event listeners on all the ul and then just create an object with the desired properties assuming li order doesn't change.
var uls = document.querySelectorAll('.dealer-summary-list');
var obj = {};
uls.forEach(function(ul){
ul.addEventListener('click', function(){
var lis = ul.querySelectorAll('li');
obj.address = lis[1].innerText;
obj.locale = lis[2].innerText;
obj.phone = lis[3].innerText;
obj.title = lis[0].innerText;
console.log(JSON.stringify(obj));
});
});

Put Duplicates under Common Element [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have the following code.
<ul id="listOne">
<li class="columnItem>John</li>
<li class="columnItem>James</li>
<li class="columnItem>Mary</li>
</ul>
<ul id="listTwo">
<li class="columnItem>John</li>
<li class="columnItem>Mark</li>
<li class="columnItem>Mary</li>
</ul>
I want to remove the duplicate list items from both list and place it under another list as "CommonList". Something like
<ul id="CommmonList">
<li class="columnItem>John</li>
<li class="columnItem>Mary</li>
</ul>
<ul id="listOne">
<li class="columnItem>James</li>
</ul>
<ul id="listTwo">
<li class="columnItem>Mark</li>
</ul>

You could do this using ES6 Sets.
Here is what you could do.
$(() => {
let names = [];
let nameSet = new Set();
$("li.columnItem").each((idx, ele) => {
nameSet.add($(ele).html())
});
var $common = $("<ul>").addClass("commmonList");
nameSet.forEach((name) => {
if ($("li:contains(" + name + ")").length > 1) {
$("li:contains(" + name + ")").remove();
$("<li>").addClass("columnItem").html(name).appendTo($common);
}
});
$common.appendTo($("div"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="listOne">
<li class="columnItem">John</li>
<li class="columnItem">James</li>
<li class="columnItem">Mary</li>
</ul>
<ul id="listTwo">
<li class="columnItem">John</li>
<li class="columnItem">Mark</li>
<li class="columnItem">Mary</li>
</ul>
</div>

Jquery Each function will help you in this problem. You can traverse all list items with a for loop as you see below.
This is the basic solution working in O(n^2), you can use more effective algorithm to compare list elements.
$("#duplicate").on('click',function(){
var CommmonListHtml = "<ul id='CommmonList'>";
$( "#listOne li" ).each(function( index_one ) {
thiz = $(this);
$( "#listTwo li" ).each(function( index ) {
if(thiz.text() == $(this).text()){
CommmonListHtml += "<li>"+$(this).text()+"</li>";
thiz.remove();
$(this).remove();
}
});
});
CommmonListHtml += "</ul>";
$("div.lists").prepend(CommmonListHtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='lists'>
<ul id="listOne">
<li class="columnItem">John</li>
<li class="columnItem">James</li>
<li class="columnItem">Mary</li>
</ul>
<ul id="listTwo">
<li class="columnItem">John</li>
<li class="columnItem">Mark</li>
<li class="columnItem">Mary</li>
</ul>
<a href='#' id='duplicate'>Remove Duplicates</a>
</div>

$("#listOne li").each(function(a,c){
$("#listTwo li").each(function(b,d){
if($(c).html()==$(d).html()){
var re=$(c).remove()[0];
$(d).remove();
$("#CommmonList").append(re);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="listOne">
<li class="columnItem">John</li>
<li class="columnItem">James</li>
<li class="columnItem">Mary</li>
</ul>
<ul id="listTwo">
<li class="columnItem">John</li>
<li class="columnItem">Mark</li>
<li class="columnItem">Mary</li>
</ul>
<ul id="CommmonList">
</ul>

How to get all decendant li of ul even under another ul

how can i get "all" attr("class") of li under ul#div and return it as array with out repeating same value of class?
<ul id="div">
<li class="a"></li>
<li class="aa">
<ul id="set">
<li class="aa1"></li>
<li class="aa2"></li>
</ul>
</li>
<li class="aaa"></li>
<li class="aaa"></li>
<li class="aaa"></li>
<li class="a"></li>
</ul>
im looking for return like this:
return class in array(a,aa,aa1,aa2,aaa)

Get all <li> descendants of <ul> that have a class attribute, make it into a standard array, then get classes of each one.
var classes = $('ul li[class]').toArray().map(function(el) { return el.className });
console.log(classes);
<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="div">
<li class="a"></li>
<li class="aa">
<ul id="set">
<li class="aa1"></li>
<li class="aa2"></li>
</ul>
</li>
<li class="aaa"></li>
<li class="aaa"></li>
<li class="aaa"></li>
<li class="a"></li>
</ul>

With pure JavaScript, you could do something like this
var node = document.getElementById("div");
var children = node.childNodes;
var output = [];
for (var i = 0; i < children.length; i++)
{
if (typeof children[i].className !== "undefined")
output.push(children[i].className);
}

Convert dynamic DOM structure to JSON

How can convert below DOM to JSON array which will have many more leafs in thefuture . I have tried a lot but didn't got any solution. I found this but it is not possible in my case.
HTML Code
<ul id="org1">
<li>
Main
<ul data-self="1">
<li data-self="2" data-parent="1">A
<ul data-self="2">
<li data-self="5" data-parent="2">A1</li>
<li data-self="6" data-parent="2">A2</li>
<li data-self="7" data-parent="2">A3</li>
<li data-self="8" data-parent="2">A4</li>
<li data-self="9" data-parent="2">A5</li>
<li data-self="10" data-parent="2">A6</li>
</ul>
</li>
<li data-self="3" data-parent="1">B
<ul data-self="3">
<li data-self="11" data-parent="3">B1</li>
<li data-self="12" data-parent="3">B2</li>
<li data-self="13" data-parent="3">B3</li>
<li data-self="14" data-parent="3">B4</li>
</ul>
</li>
</ul>
</li>
</ul>
JSON Required is
{
1:{
2:{5,6,7,8,9,10},
3:{11,12,13,14}
}
}
Script
function recursive(dis)
{
$(this).find(' > ul ').each(function(){
params[$(this).attr('data-self')]=[];
var i=0;
$(this).find('li').each(function(){
if($(this).has('ul'))
{
params[$(this).attr('data-parent')][i++]=rec(this);
}else
{
params[$(this).attr('data-parent')][i++]=$(this).attr('data-self');
}
});
});
}
recursive('#org1');
console.log(params);

I would prefer something like the following. The 2 changes in the HTML you need to make are:
1) Add a class to your ul such as <ul data-self="2" class="nodes">. 2) Add a class to the wrapper ul such as <ul data-self="1" class="parent">.
var json = {};
$("#org1").find("ul.parent").each(function() {
var $this = $(this);
json[$this.data("self")] = {};
var $nodes = $this.find("ul.nodes");
$nodes.each(function() {
var children = $(this).find("li").map(function() {
return $(this).data("self")
}).get();
json[$this.data("self")][$(this).data("self")] = children;
});
});
alert (JSON.stringify(json));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="org1">
<li>
Main
<ul data-self="1" class="parent">
<li data-self="2" data-parent="1">A
<ul data-self="2" class="nodes">
<li data-self="5" data-parent="2">A1</li>
<li data-self="6" data-parent="2">A2</li>
<li data-self="7" data-parent="2">A3</li>
<li data-self="8" data-parent="2">A4</li>
<li data-self="9" data-parent="2">A5</li>
<li data-self="10" data-parent="2">A6</li>
</ul>
</li>
<li data-self="3" data-parent="1">B
<ul data-self="3" class="nodes">
<li data-self="11" data-parent="3">B1</li>
<li data-self="12" data-parent="3">B2</li>
<li data-self="13" data-parent="3">B3</li>
<li data-self="14" data-parent="3">B4</li>
</ul>
</li>
</ul>
</li>
</ul>

Categories

Resources