Finding clicked item from a span using jquery - javascript

I have following HTML. I am trying to find the clicked item. For example: if I clicked on ups the o/p should be ups like that. I have written
like this but not getting what I need.This returns all text.
$('.sentiment-text .text').on('click',function(e) {
var str = $('.sentiment-text .text').find('span').text();
alert(str);
});
Here is the HTML code which I am trying.After I have written above code I am getting full text But not getting only the item I clicked
<div class="sentiment-text">
<div class="wrapper">
<div class="key"></div>
<div class="text" style="cursor: pointer;"><div class="tags alert-success">×
<span class="noun">Thumbs</span>
<span class="adverb">up</span>
<span class="verb">ups</span>
<span class="verb">down</span>
</div>
</div>
<div class="clear-sentiment"></div>
</div>
</div>


You need to use this for the context and target the span in the selector itself.
$('.sentiment-text .text span').on('click',function(e) {
var str = $(this).text();
alert(str);
});
DEMO


So rather that putting the handler on the div why not target the spans within .text and report the text
$('.text span').on('click', function(e) {
var str = $(this).text();
alert(str);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sentiment-text">
<div class="wrapper">
<div class="key"></div>
<div class="text" style="cursor: pointer;">
<div class="tags alert-success">×
<span class="noun">Thumbs</span>
<span class="adverb">up</span>
<span class="verb">ups</span>
<span class="verb">down</span>
</div>
</div>
<div class="clear-sentiment"></div>
</div>
</div>


Use below:
$('.text span').on('click', function() {
alert($(this).text());
});


$('.sentiment-text span').on('click',function(e) {
var str = $(this).text();
alert(str);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sentiment-text">
<div class="wrapper">
<div class="key"></div>
<div class="text" style="cursor: pointer;"><div class="tags alert-success">×
<span class="noun">Thumbs</span>
<span class="adverb">up</span>
<span class="verb">ups</span>
<span class="verb">down</span>
</div>
</div>
<div class="clear-sentiment"></div>
</div>
</div>


try this :
$('.sentiment-text .text').find('span').on('click',function(e) {
var str = $(this).text();
alert(str);
});


I have solved this way
$('.sentiment-text span').live('click',function(e) {
var str = $(this).text();
alert(str);
});
Note that changed 'on' to 'live'. I know it is deprecated form Jquery 1.7.But no other way for me.

Related

How to edit HTML value if its in a class that cointains a specific href with javascript?

Well I am learning javascript and I am trying to write a function which would look if(href.contains(1234567) and change class="price" value to any number.
I tried googling but I cant seem to find an answer to this
<div class="product-info">
<a href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div>
</a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>
I expect class="price" value to be changed to some number

You can use the a[href*=1234567]+.price selector to do it.
a[href*=1234567] select all <a> elements that have a href attribute value containing "1234567" and +.price select element has class price placed immediately after that a[href*=1234567].
Demo:
$('a[href*=1234567]+.price').text(123456)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-info">
<a href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div></a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>
<a href="https:someUrl.com/test">
</a>
<div class="price">
ValueNoNeedsToBeAddedHere
</div>

A solution with jQuery:
function myFunction() {
var str = $('#link').attr('href');
if (str.indexOf("1234567") >= 0){
var x = document.getElementsByClassName("price");
var y = x[0];
y.classList.add('myClass');
y.classList.remove('price');
y.innerHTML = "123456"
}
}
myFunction();
.myClass{
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-info">
<a id="link" href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div>
</a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>

You can do without jquery :-
<div class="product-info">
<a href="https:someUrl.com/1234567" id="link_id" onclick="check(this.href)">
<div class="title">
Some Sweet Title
</div></a>
<div class="price" id="setvalue">
ValueHereNeedsToBeAdded
</div>
</div>
function check()
{
event.preventDefault();
var href = document.getElementById("link_id").getAttribute("href");
if(href.includes(1234567))
{
document.getElementById('setvalue').innerHTML = '1313133';
}
}

How to get previous element from click target?

Hello I have this html code:
<div class="row newrow">
<div class="col-10"><b>this</b></div>
<div class="col-2">
<img src="close.png" id="exit"/>
</div>
</div>
When I click on img with id exit using this code
$('body').on('click','#exit',function(e){
})
I need to get the text of the <b>behind it which would be "this"
I have tried this but it does not work:
$('body').on('click','#exit',function(e){
$q = $(e.target).prev('b')
var word = $q.text()
)}
It only gives me the that I clicked from the beginning

try this:
$('body').on('click','#exit',function(e){
var this_b = $(this).parent().prev().children(0).html();// get the text
alert(this_b);
});

You can use $(this).closest('.row').find('b'):
$('#exit').click(function(e){
$q = $(this).closest('.row').find('b');
var word = $q.text();
console.log(word);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row newrow">
<div class="col-10"><b>this</b></div>
<div class="col-2">
<img src="close.png" id="exit"/>
</div>
</div>

You need to select the parent of the clicked img to get the the .col-2, and then get the col-2's prev() to get to the .col-10, and then you can access its children() to get the children (the single <b>). Also, there's no need for e.target if you use this:
$('body').on('click', '#exit', function() {
$q = $(this).parent().prev().children();
var word = $q.text()
console.log(word);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row newrow">
<div class="col-10"><b>this</b></div>
<div class="col-2">
<img src="close.png" id="exit" />
</div>
</div>

Try this
$('body').on('click','#exit',function(e){
var word = $(this).closest('.newrow').find('b').text();
});

How to get the value in element child when click a div outside element parent JQuery

Sorry my english bad, for example I have 2 columns, every column when click div.open-model will show a model have a value is h3.title, I used jQuery but i cannot get value h3.title every column
$(document).ready(function() {
$('.open_modal').click(function(e) {
var h3title = $(this).find('.parent .title').html();
console.log('h3title');
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<h3 class="title">Title1</h3>
</div>
<div class="open-model">Open model</div>
<div class="parent">
<h3 class="title">Title2</h3>
</div>
<div class="open-model">Open model</div>

Try prev().
var h3title = $(this).prev('.parent').find(".title").text();
And after fixing other errors
$(document).ready(function() {
$('.open-model').click(function(e) {
var h3title = $(this).prev('.parent').find(".title").text();
console.log(h3title);
e.preventDefault();
});
});

You've got several issues here:
The class on the element is open-model so your selector of open_modal is incorrect
find() looks for child elements, yet the target you want to find is a child of a sibling, so you need prev().find() instead
h3title is a variable, so you don't need to wrap it in quotes when passing it as an argument to console.log().
Try this:
$(document).ready(function() {
$('.open-model').click(function(e) {
e.preventDefault();
var h3title = $(this).prev('.parent').find('.title').text();
console.log(h3title);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<h3 class="title">Title1</h3>
</div>
<div class="open-model">Open model</div>
<div class="parent">
<h3 class="title">Title2</h3>
</div>
<div class="open-model">Open model</div>

spelling of selector is wrong on click
use .prev() instead of .find()
$('.open-model').click(function(e) {// fix selector
var h3title = $(this).prev('.parent').find('.title').html();//use prev()
console.log(h3title);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<h3 class="title">Title1</h3>
</div>
<div class="open-model">Open model</div>
<div class="parent">
<h3 class="title">Title2</h3>
</div>
<div class="open-model">Open model</div>

Change it to
$(document).ready(function(){
$('.open-modal').click(function(e){
e.preventDefault();
var h3title = $(this).prev().find('.title').text();
console.log('h3title');
});
});

In the example below we are getting the the previous DOM element and as we can see in the structure we want to get the inner text of its child element.
$('.open-model').on('click', function(){
console.log($(this).prev().children().text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<h3 class="title">Title1</h3>
</div>
<div class="open-model">Open model</div>
<div class="parent">
<h3 class="title">Title2</h3>
</div>
<div class="open-model">Open model</div>

How can i remove span tags from elements?

I want to remove all the span tags having class article and attach a new span tags to the content
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>
In the javascript i've a text,
var text = "bar lorem ipsum";
I want javascript to find this in the DOM and if it is there, then remove the span tags from the elements and put all of them in a single span tag, like this
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar lorem ipsum</span>
</div>
Any help would be greatly appreciated.

You can use jQuery each() function for this, check updated snippet below:
var newHTML ='';
$('.asd span.article').each(function(){
newHTML += $(this).text() + " ";
$(this).remove();
})
$('.asd').append("<span class='article'>"+newHTML+"</span>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>

Here you check with jquery:
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>
Js
$(".article").remove();
$(".asd").append('<span class="article">bar lorem ipsum</span>');
Hope this helps you.

Try this .use with each function jquery .check the class name includes in array .Is not Then pass the the class name to array .
And also added the respected text with eq(0)(first element of same classname)
var arr=[];
$('.asd').children('span').each(function(a){
var cls =$(this).attr('class');
if(!arr.includes(cls)){
arr.push(cls);
}
else{
$('.'+cls).eq(0).text($('.'+cls).eq(0).text()+' '+$(this).text())
$(this).remove()
}
})
console.log($('.asd').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>

index of nested div with click event with jquery?

I have a click event that I'm using trying to get the index of the outermost parent div but can't seem to return it.
Here is the list of several divs:
<div class="owl-item">
<div class="icon-holder-selection" id="sel11">
<div class="thumbnail" id="cur11">
<img src="images/icons/11.jpg">
<div class="icon-action">
<span class="glyphicon glyphicon-remove remove-selection" id="11"></span>
<span class="icon-content">Remove</span>
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="icon-holder-selection" id="sel12">
<div class="thumbnail" id="cur12">
<img src="images/icons/12.jpg">
<div class="icon-action">
<span class="glyphicon glyphicon-remove remove-selection" id="12"></span>
<span class="icon-content">Remove</span>
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="icon-holder-selection" id="sel13">
<div class="thumbnail" id="cur13">
<img src="images/icons/13.jpg">
<div class="icon-action">
<span class="glyphicon glyphicon-remove remove-selection" id="13"></span>
<span class="icon-content">Remove</span>
</div>
</div>
</div>
</div>
My click event looks like this:
$(document).on("click", ".remove-selection", function(e) {
e.preventDefault ();
//var index = $(this).index();
var parent = $(this).closest('div');
var index = $(".owl-item").index(parent);
console.log("INDEX: " + index);
});
Any idea what I'm missing?

You need to provide a class name .owl-item for the div in .closest(), otherwise it will just return a direct parent of your span element.
Working demo: http://jsfiddle.net/1t6xgbth/
$(document).on("click", ".remove-selection", function(e) {
e.preventDefault ();
//var index = $(this).index();
var parent = $(this).closest('div.owl-item');
var index = $(".owl-item").index(parent);
alert(index);
console.log("INDEX: " + index);
});

Using delegateTarget is easier and simpler by using the owl-item selector instead of document:
$('.owl-item').on("click", ".remove-selection", function(e) {
e.preventDefault ();
console.log($(e.delegateTarget).index());
});
Another fiddle

Categories

Resources