We Keep Coding

Jquery find element using data attribute of the parent

I have two same ids but in different divs and I am trying to create a click event
<div data-group = "points">
<div>
<ul>
<li id="first point"></li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li id="first point"></li>
</ul>
</div>
</div>
I have created a onclick event like this
this._toolbox._container.on('click', "[id = 'first point']", function (ev) {
}
But this is listening to all the ids with 'first point'.
How can I create a click event only when 'first point' inside data-group="points" is clicked
Any suggestions or help would be appreciated.

First problem is that id should be unique in whole document. Two elements shouldn't have same id. You should use class for that.You can use [data-group=points] before the selector.
You don't need to select id or class using attribute selector. Just use # for id and . for class
$('[data-group=points] .first-point').click(function(){
console.log("I am clicked")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group = "points">
<div>
<ul>
<li class="first-point">one</li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li class="first-point">two</li>
</ul>
</div>
</div>

You can use the same attribute equals selector with the descendant selector.
this._toolbox._container.on('click', '[data-group="points"] [id="first point"]', function (ev) {
});
$(document).on('click', '[data-group = "zone"] [id ="first point"]', function(ev) {
console.log('clicked');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group="points">
<div>
<ul>
<li id="first point">1</li>
</ul>
</div>
</div>
<div data-group="zone">
<div>
<ul>
<li id="first point">2</li>
</ul>
</div>
</div>
From MDN docs:
The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
id's value must not contain whitespace (spaces, tabs etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID.
FYI : The id should be unique in a context so always use class instead of id for a group of elements.
HTML :
<div data-group = "points">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
Script :
this._toolbox._container.on('click', '[data-group="points"] .first_point', function (ev) {
});
$(document).on('click', '[data-group="points"] .first_point', function(ev) {
console.log('clicked');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group="points">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
<div data-group="zone">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>

You can try this code here: The $(el).click() not work when you add a dynamic element or contents. so you can choose any one solutions.
$(document).on('click','[data-group="points"] li',function(){
console.log("you are points datagroup clicked");
});
$(document).on('click','[data-group="zone"] li',function(){
console.log("you are points zone clicked");
});
//or
$(document).on('click','[data-group] li',function(){
if( $(this).parents('[data-group="points"]') ){ // check group item parent type
console.log(" points datagroup clicked");
}
else if( $(this).parents('[data-group="zone"]') ){ // check group item parent type
console.log("points zone clicked");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group = "points">
<div>
<ul>
<li class="first-point">one</li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li class="first-point">two</li>
</ul>
</div>
</div>
= = =
Thank you
= = =

How to find certain text on child nodes using JavaScript when selecting by class name

I have multiple divs with the same structure as follows, I need to check for a text within the child nodes on each main div tag
<div class="s4-wpcell-plain">
<div class="ms-chrome">
<div class="ms-chrome-title" id="WPWPQ6_ChromeTitle">
<span title="My Content" id="WPTitleWPQ6" class="js-wp-titleCell">
<h2 style="text-align:justify;" class="ms-wp-titleText">Results (0)</h2>
</span>
</div>
<div wpid="50348231-8acb-4794-af32-d481915fc127" haspers="false" id="WPWPQ6" width="100%" class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace " allowdelete="false" style="">
<div style="display: none;">
</div>
<div componentid="ctl00_ctl40_g_50348231_8acb_4794_af32_d481915fc127_csr" id="ctl00_ctl40_g_50348231_8acb_4794_af32_d481915fc127_csr">
<div class="containerForStyle">
<ul class="cbs-List">
<div class="ms-srch-result-noResults">There are no items to show. </div>
</ul>
</div>
</div>
</div>
</div>
</div>
In this case I'm selecting the main div with document.getElementsByClassName("s4-wpcell-plain") from there I need to check for the text "There are no items to show" and hide the corresponding main div.
I have tried to use
document.getElementsByClassName("s4-wpcell-plain").getElementsByTagName("*")
and after this, I will scan on each element on innerText but it is not getting the elements, any help would be appreciated.

I wasn't sure if you wanted .s4-wpcell-plain to disappear or the element that has the text so I wrote code for both objectives and commented out the part that hides .s4-wpcell-plain.
Trying to find a text in DOM is inefficient, you need to use whatever this widget uses and I can assure you it isn't the text it generates. The pattern looks like if there's no items to show the message would be in a div with the className of:
.ms-srch-result-noResults
I don't know how your widget works so I'm assuming that whenever there's no items to show then it creates:
<div class="ms-srch-result-noResults">There are no items to show. </div>
The Demo:
Collects all .ms-srch-result-noResults into a NodeList with document.querySelectorAll()
Makes that NodeList into an array with Array.from()
Runs the array thru forEach() array method.
On each .ms-srch-result-noResults is sets style.display to none
There's also an alternate forEach() method setup to use closest() to find .s4-wpcell-plain and then hide that instead.
Demo
Details commented in Demo
/* Collect all .ms-srch-result-noResults into a NodeList
|| then convert that NodeList into an array
*/
var noResults = Array.from(document.querySelectorAll('.ms-srch-result-noResults'));
/* Run the array thru forEach() method
|| hide each .ms-srch-result-noResults
*/
noResults.forEach(function(v, i) {
v.style.display = 'none';
});
/*//Or do the same thing but hide the .s4-wpcell-plain instead
noResults.forEach(function(v, i) {
var main = v.closest('.s4-wpcell-plain');
main.style.display = 'none';
});
*/
<div class="s4-wpcell-plain">
<div class="ms-chrome">
<div class="ms-chrome-title" id="WPWPQ6_ChromeTitle">
<span title="My Content" id="WPTitleWPQ6" class="js-wp-titleCell">
<h2 style="text-align:justify;" class="ms-wp-titleText">Results (0)</h2>
</span>
</div>
<div wpid="50348231-8acb-4794-af32-d481915fc127" haspers="false" id="WPWPQ6" width="100%" class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace " allowdelete="false" style="">
<div style="display: none;">
</div>
<div componentid="ctl00_ctl40_g_50348231_8acb_4794_af32_d481915fc127_csr" id="ctl00_ctl40_g_50348231_8acb_4794_af32_d481915fc127_csr">
<div class="containerForStyle">
<ul class="cbs-List">
<li class="ms-srch-result-noResults">There are no items to show. </li>
</ul>
</div>
<ul class="cbs-List">
<li class="ms-srch-result-results">There are items to show. </li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
</ul>
</div>
<ul class="cbs-List">
<li class="ms-srch-result-results">There are items to show. </li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
</ul>
</div>
<ul class="cbs-List">
<li class="ms-srch-result-noResults">There are no items to show. </li>
</ul>
</div>
</div>

innerText returns text content of all of its nested childrens
try:
var elements = document.getElementsByClassName("s4-wpcell-plain");
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerText.indexOf('There are no items to show') !== -1) {
elements[i].style.display = 'none';
}
}

So here are the things you may follow,
1 - Get the list of elements with document.getElementsByTagName
2 - You can use iterate over, to filter out with the innerText && ClassName for each element
CODE:
// Get the elements list by ClassName
var allEles = documents.getElementsByTagName("*");
var templateString = 'Something';
var wantedClassName = 'ClassName';
// Iterate over all the elements
for(var key in allEles) {
if( (a[key].className === wantedClassName) && (a[key].innerText) === templateString ) {
/* Do Whatever you want with this element => a[key] */
}
}
`

Get computed number of ordered list item

Is there a way to get the content of an ordered list item's number?
var list = document.getElementById('list');
list.style.listStyleType = 'upper-roman';
<ol class="list" id="list">
<li class="list__item">apple</li>
<li class="list__item">banana</li>
<li class="list__item" id="target">orange</li>
<li class="list__item">pear</li>
</ol>
That will produce a list of items like this.
I. apple
II. banana
III. orange
IV. pear
Is there a way to get the III string of text of the #target list item?
EDIT:
Roman characters here are just an example. I'd like the ability to access to the content provided by any of the list-style-type options.

The only way I can think of doing this is the following:
1) Get the index of the item (e.g. 3)
2) Have a function like this: https://stackoverflow.com/a/9083076/1324321
3) Run the index through the function

I created a jsfiddle here which can display the chosen selection to the user. Although javascript is not holding this as a string, I first find the index of the selected list item, then I recreate a list of that one item with the "start" attribute being set to that index.
Here is the HTML:
<ol>
<li>first</li>
<li>second</li>
<li id="active">third</li>
<li>Fourth</li>
</ol>
<br/>
<br/>
<div id='selected'>
</div>
And the JQuery:
$(document).ready(function() {
var intt = $('li').index($('#active')) + 1;
$('#selected').html('<ol start="' + intt + '"><li></li></ol>');
});
JSFIDDLE

You could use the start attribute and iterate all list elements.
var list = document.getElementById('list'),
start = list.start || 0;
list.style.listStyleType = 'upper-roman';
Array.prototype.forEach.call(list.getElementsByTagName('li'), function (a, i) {
if (a.id === 'target') {
console.log(i + start);
console.log(a.innerHTML);
}
});
<ol class="list" id="list" start="5">
<li class="list__item">apple</li>
<li class="list__item" >banana</li>
<li class="list__item" id="target">orange</li>
<li class="list__item">pear</li>
</ol>

Retrieving the values in an un - ordered list and list items

I have html rendered in the format below.
I want to be able to get the values 13,14,15 and store in different variables.
I want to be able to get the value id=9 as well for this row.
I will be updating a table and needs this Id together with the other rows.
Here is the html rendered
<li class="main">
<ul class="sub">
<li id="9">
<div class="innera">13</div>
<div class="innerb">14</div>
<div class="innerc">15</div>
<div class="innerpencil">
<img class="modify" src="/images/icon-pencil" />
</div>
</li>
</ul>
<li>
Here is the jquery I am trying to write
$(document).on("click", "img.modify", function () {
var rowA = $("ul[class='sub'] li[div.class innera]")
var rowB = $("ul[class='sub'] li[div.class innerb]")
var rowB = $("ul[class='sub'] li[div.class innerc]")
var Id of row ?
});
Right now I am not getting anything for the variables? Kindly assist.

I think you just need to review the jQuery (CSS) selectors: https://api.jquery.com/category/selectors/
$("ul[class='sub'] li[div.class innera]") won't match anything.
$('ul.sub>li>div.innera') would work, but maybe you want something a little different. Take a look at the selectors docs, and some trial and error :)

Can't you use a foreach loop on the li tag?
Like this?
$(document).on("click", "img.modify", function () {
var id = $('.sub > li').first().attr("id");
console.log(id);
$('#'+id+' > .divValue').each(function () {
var variableName = $(this).text();
console.log(variableName);
});
});
}
I would add an class to the elements value you want.
Like this:
<li class="main">
<ul class="sub">
<li id="9">
<div class="innera divValue">13</div>
<div class="innerb divValue">14</div>
<div class="innerc divValue">15</div>
<div class="innerpencil">
<img class="modify" src="/images/icon-pencil" />
</div>
</li>
</ul>
<li>

How to select phone number and contact from html element using jQuery?

I want to select phone number and contact name from html form and not able to select it with my code. I don't know what is wrong?
<ul class="contact-list">
<li>
<div class="phone">0128685665</div>
(Mike Lau)
</li>
<li>
<div class="phone">0242342354</div>
(John Son)
</li>
<li>
<div class="phone">012343534</div>
(Sam)
</li>
</ul>
and here is my code
var contact=[];
$('.contact-list').eq(0).find('li').find('.phone').each(function (i,elem){
contact.push($(elem).text().replace(/[A-Za-z\s]+/,'').trim());
});
for(var i=1;i<contact.length;i++){
console.log(contact[i]);
}
How can I select all phone numbers and contact names? Thanks in advace

$(".phone").each(function(){
var name = $(this).parent().clone().children().remove().end().text();
var phonenumber = $(this).text();
contact.push({name: name, phoneNumber: phonenumber});
});
console.log(contact);

created this fiddle for you
var contact=[];
$('.contact-list li ').each(function (i,elem){
contact.push( {
phone : $( this ).find('.phone').html(),
contact : $.trim( $( this ).clone().children().remove().end().text() ),
} );
});
for(var i=0;i<contact.length;i++){
console.log(contact[i]);
}
or simply just
$('.contact-list li ').each(function (i,elem){
contact.push( $.trim( $( this ).clone().children().remove().end().text() );
});

i think this is work fine for you.
var contact=[];
$('.contact-list li').each(function (i,item){
contact.push($(item).find(".phone").text().replace(/[A-Za-z\s]+/,'').trim());
});
for(var i=1;i<contact.length;i++){
alert(contact[i]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<ul class="contact-list">
<li>
<div class="phone">0128685665</div>
(Mike Lau)
</li>
<li>
<div class="phone">0242342354</div>
(John Son)
</li>
<li>
<div class="phone">012343534</div>
(Sam)
</li>
</ul>

You can easily add span or div to names and fetch them into object, later which adds into array.
Please see code for html
var contact=[];
$('.contact-list').eq(0).find('li').each(function (key,value){
var phone = $(value).find('.phone').text().replace(/[A-Za-z\s]+/,'').trim();
var name = $(value).find('.name').text().trim();
contact.push({"name":name,"phone":phone});
});
for(var i=0;i<contact.length;i++){
alert(("name " + contact[i].name) + " and " + "phone " + contact[i].phone);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="contact-list">
<li>
<div class="phone">0128685665</div>
<span class="name"> (Mike Lau)</span>
</li>
<li>
<div class="phone">0242342354</div>
<span class="name">(John Son)</span>
</li>
<li>
<div class="phone">012343534</div>
<span class="name">(Sam)</span>
</li>
</ul>
You can also will need onload function or ondocumentready so your code runs as soon as page loads, or when you perform some action it will be triggered.

You should include the names in a separate tab as well. Some thing like this:
<ul class="contact-list">
<li>
<div class="phone">0128685665</div>
<div class="name">(Mike Lau)</div>
</li>
<li>
<div class="phone">0242342354</div>
<div class="name">(John Son)</div>
</li>
<li>
<div class="phone">012343534</div>
<div class="name">(Sam)</div>
</li>
</ul>
Then you can easily fetch names and phones using jQuery.

This should work, here is a demo jsFiddle.
jQuery
// array list of contacts:
var contacts = [];
// contact class:
function contact(name, phone) {
this.name = name,
this.phone = phone
}
// retrieve contact info from the DOM:
$('.contact-list li ').each(function(index, element) {
var phone = $(this).find('.phone').text();
var name = $.trim($(this).children().remove().end().text());
var person = new contact(name, phone);
contacts.push(person);
});
// view all contacts in array list:
for (var i = 0; i < contacts.length; i++) {
console.log(contacts[i].name, contacts[i].phone);
}