Copy first character of string to another div jquery or javascript - javascript

Is it possible with jQuery or Javascript to copy the first character of a string that's user generated to another div?
As an example, the contact list on iPhone. The first letter of the contact name is used in the circle adjacent to the name.
With the correct snippet the output would be as follows, where 'First name, Last name' will be different.
<div class="initial">F</div>
<div class="name">First name, Last name</div>
<div class="initial">J</div>
<div class="name">John Smith</div>
I tried to get some ideas from these other posts:
How do I make the first letter of a string uppercase in JavaScript?
How can I get the first three letters of a string in JQuery?
Detect character in div and remove it Javascript or jQuery
However, I'm not sure where to start and how to output the result to the 'initial' div.

The simple way to do this is to provide a function to text() of the .initial elements which reads the first character from the sibling .name and returns it, like this:
$('.initial').text(function() {
return $(this).next('.name').text().slice(0, 1).toUpperCase();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="initial"></div>
<div class="name">Foo Bar</div>
<div class="initial"></div>
<div class="name">John Smith</div>

a vanilla JS solution i came up with:
https://jsfiddle.net/y0c9be6g/
<div class="initial"></div>
<div class="name">Bob Smith</div>
<div class="initial"></div>
<div class="name">Jim Halpert </div>
<div class="initial"></div>
<div class="name">Billy Baldwin</div>
<script>
var names = document.querySelectorAll(".name");
var initials = document.querySelectorAll(".initial");
function addInitial(item){
item.previousSibling.previousSibling.innerHTML = item.textContent.charAt(0);
}
names.forEach(addInitial);
</script>

Related

How to use a search box to filter by class name?

Hi I was wondering if anyone could help, I'm trying to make it so when you search in a search box if a div contains a word you entered in the box it will show and if not it will hide. This is what I have so far but now I'm stuck, I have researched but I only have a basic knowledge of Javascript and I can't seem to get any further. Thank you!
function myFunction() {
// Declare variables
var input, filter;
input = document.getElementById('myInput');
filter = input.value.toLowerCase();
$('div').find('div').each(function(){
var className = $(this).attr("class");
});
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<div class="wrapper">
<div class="test"><h1>hello 1</h1></div>
<div class="no"><h1>hello 2</h1></div>
<div class="no"><h1>hello 3</h1></div>
<div class="test"><h1>hello 4</h1></div>
</div>
Taking these two requirements:
contains a word
filter by class name
You can filter by class name by using a selector "."+classname, eg .test, so you can combine the input text with "." and use that as a selector.
$(".wrapper>div."+filter).show();
When combining like this, you do need to check for items that will make the query break (eg empty value) - might be better to have a select for this, which would also reduce typos.
If you use a jquery event (as already using jquery), this will be the input, so you can get the filter with a simple:
var filter = $(this).val();
There's various ways to show/hide/toggle, here's one method, combining the above.
$("#myInput").on("keyup", myFunction);
function myFunction() {
var filter = $(this).val().toLowerCase().trim();
$(".wrapper>div").hide();
if (filter !== "")
$(".wrapper>div."+filter).show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myInput" placeholder="Search for names..">
<div class="wrapper">
<div class="test">
<h1>hello 1</h1>
</div>
<div class="no">
<h1>hello 2</h1>
</div>
<div class="no">
<h1>hello 3</h1>
</div>
<div class="test">
<h1>hello 4</h1>
</div>
</div>
The text() method in jQuery returns the text content of the specified element and removes any markup inside it. What you would want to do is loop through all divs, get their text content and pass it through includes to check if any part of the search text matches. If it does, you show it using jQuery show() method and hide it using hide() method. Also, you don't need to use find('div').
function myFunction() {
// Declare variables
var input, filter;
input = document.getElementById('myInput');
filter = input.value.toLowerCase();
$('div').each(function(){
var divTextContent = $(this).text().toLowerCase();
if (divTextContent.includes(filter)){
$(this).show();
} else {
$(this).hide();
}
});
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<div class="wrapper">
<div class="test"><h1>hello 1</h1></div>
<div class="no"><h1>hello 2</h1></div>
<div class="no"><h1>hello 3</h1></div>
<div class="test"><h1>hello 4</h1></div>
</div>

Get div value from class name

I have a very large HTML that contains lots of divs with the same name, I want a way to only filter or extract that value from that div.
Here is an example:
<td class="last">
<div class="container-relative">
<div class="name" title=""User" <John Appleseed>"></div>
<div class="date">9/17/2019</div>
<div class="tool"></div>
</div>
</td>
I need to extract only what's between <John Appleseed>, in this case is 'John Appleseed'.
You could use querySelectorAll to take all the elements with class name, then get the title attribute with getAttribute, and finally use a regular expression to match text between <>.
document.querySelectorAll('.name').forEach(item => {
let title = item.getAttribute('title');
console.log(title.match(/\<.*\>/));
});
<td class="last">
<div class="container-relative">
<div class="name" title=""User" <John Appleseed>"></div>
<div class="date">9/17/2019</div>
<div class="tool"></div>
</div>
</td>
var divs=[];
for(i=0,j=0,obj=document.getElementsByClassName("name");i<obj.length;i++)
if(obj[i].title.includes("John Appleseed") &&
/* obj[i].title.split("\"")[2].trim()=="<John Appleseed>" && */
obj[i].tagName.toLowerCase()=="div"){
divs[j++]=obj[i];
}
console.log(divs);
separate your div using div ID. Then get your respective div using that value of ID. Then in javascript you can use getElementByID.
You can use Xpath,
.//div[contains(#class, 'Test')]
Then extract you required text from it.

jQuery Grouping by first letter

I have list of posts in Wordpress its looks like this:
<div class="products uk-grid uk-grid-width-medium-1-4">
<h3>AShape(14)</h3>
<h3>AShape(20)</h3>
<h3>CShape(38)</h3>
<h3>FShape(1)</h3>
<h3>FShape(4)</h3>
<h3>ZShape(2)</h3>
<h3>ZShape(24)</h3>
</div>
I need to find some way to pass all links through script and transform it in letter groups. So it should take first letter from all <h3> of links and make groups like this:
<div class="products uk-grid uk-grid-width-medium-1-4">
<div>
<span>A</span>
<h3>AShape(14)</h3>
<h3>AShape(20)</h3>
</div>
<div>
<span>C</span>
<h3>CShape(38)</h3>
</div>
<div>
<span>F</span>
<h3>FShape(1)</h3>
<h3>FShape(4)</h3>
</div>
<div>
<span>Z</span>
<h3>ZShape(2)</h3>
<h3>ZShape(24)</h3>
</div>
</div>
How i can do it using jQuery?
here i have simple codepen: http://codepen.io/ponciusz/pen/EPgQKP
You could iterate over each of the children elements and create corresponding containers for each letter. In the example below, a div container is appending with a custom data-letter attribute if a container does not already exist for that letter.
As I mentioned in the comments, I'd also suggest placing the a element inside of the h3 elements as well:
$('.products > h3').each(function () {
var letter = $('a', this).text().charAt(0);
if (!$(this).parent().find('[data-letter="'+ letter +'"]').length) {
$(this).parent().append('<div data-letter="'+ letter+'"><span>'+ letter +'</span></div>');
}
$(this).parent().find('[data-letter="'+ letter +'"]').append(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="products uk-grid uk-grid-width-medium-1-4">
<h3>AShape(14)</h3>
<h3>AShape(20)</h3>
<h3>CShape(38)</h3>
<h3>FShape(1)</h3>
<h3>FShape(4)</h3>
<h3>ZShape(2)</h3>
<h3>ZShape(24)</h3>
</div>

I am misunderstanding a jQuery array

This code doesn't work
var next = $("#orders").find(".next");
if (next.length == 1) {
var address = $(next[0]).find(".directionsAddress");
var destination = $(address[0]).text();
}
It is suppose to find one div with a class of "next" that I know exists on the page, then within that one item of the result set array, there will be one div with a class name of directionsAddress. The "next" array is coming back with a length of 1, so it looks like the problem is with my $(next[0]).find because the address array is coming back as 0 length and I am making a syntax error of some sort that I don't understand.
are you looking to do something like this?
$(document).ready(function() {
alert($('#orders div.next:first div.directionsAddress:first').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "orders">
<div class="next">
<div class="directionsAddress">THIS IS WHAT I WANT</div>
<div class="directionsAddress">This is not the one I want</div>
</div>
<div class="next">
<div class="directionsAddress">This is not the one I want</div>
</div>
<div class="next">
<div class="directionsAddress">This is not the one I want</div>
</div>
</div>

jQuery to check if ID value has a number

Is there a way in jQuery to check if an ID value (Ex. id="number1") contains a number?
The idea would be:
if (ID has a number which will come from a variable) then do something.
this is what I came up with so far but it only works with the first div:
$("#tabsstyle li a").bind("click", function () {
var numSlide = $(this).attr("rel");
if ($('#slidesContainer div').attr('id').match(numSlide) ) {
$('#slidesContainer div').fadeIn();
}
numSlide will store a number coming from one of the 'a' clicked and check that number will be included in the id value of '#slidesContainer div', once that checked then the right div will fadeIn.
HTML structure below:
<div id="slidesContainer">
<div id="n1" class="slide">
<h2>Web Development Tutorial</h2>
<p><button class="test">N1</button></p>
</div>
<div id="n2" class="slide">
<h2>Grunge Brushes, Anyone?</h2>
<p><button class="test">N2</button></p>
</div>
<div id="n3" class="slide">
<h2>How About Some Awesome Grunge Textures?</h2>
<p><button class="test">N3</button></p>
</div>
<div id="n4" class="slide">
<h2>'Tis the End, My Friend.</h2>
<p><button class="test">N4</button></p>
</div>
</div>
var id = $('#element').attr('id'); // #element will replace
// with your desired selector
id.match(/[0-9]/g)
Checking
if( id.match(/[0-9]/g) ) {
// do something
}
You can take a look at the following jquery plugin
https://github.com/jquery/globalize
That handles "numbers" a number can be an integer or a decimal, and a decimal number has different representations based on the culture :)
You can use javascript to build a function with test and a regular expression to check if a string contains a number.
function hasNumber(t){
//regular expression: /\d/g
return /\d/g.test(t);
}
And then use jQuery to check the value of the attribute id
alert (hasNumber($('#checkMe').attr('id')))

Categories