Finding a div with certain link inside - javascript

If I'm given a class of a div $('.my_class') and that a div contains a link a with a certain url which I'm also given, how do I find this div?

Here's how to do it:
$('div.my_class a[href="LINK"]').closest('div.my_class');

First find the link that is a child of your .my_class, then find the closest parent with that class. That will return you the original div:
$('.my_class a[href="mylink.com"]').closest('.my_class');

It sounds like your markup looks like this:
<div class="my_class">
Click me
</div>
So in jQuery it would look like:
$(".my_class").find("a[href='some_link']").closest(".my_class");

Try this
var certain_url = 'http://www.stackoverflow.com';
//...
var the_link = $('div.my_class a[href="'+certain_url+'"]').closest('div.my_class')

Like this.
$('div.my_class a[href="mylink"]').parent();

Related

Get element by id and put it inside bootstrap col

I have a div with an ID, this div is added to the web page by the library but i want to put this div in a col-xs-6, can i do something like document.getElementById() then put it in col-xs-6?
The easiest way to do this without any framework is to use element.classList.add method.
var element = document.getElementById("div1");
element.classList.add("otherclass");
IF your using jquery then you can simply do this,
$('#Id_of_element').addClass('col-xs-6')
If I understood you correctly you want to grab this div by id and add to it bootstrap class col-xs-6. If so then try this:
var yourDiv = document.getElementById("ID");
yourDiv.className += " col-xs-6";

How to hide parent div based on child name?

I have a page with numerous divs. The main div contains 3 sub divs. I put a search box and i want to show the main div based on what i type and hide the others.
I looked on the internet and so far i managed to do this: https://jsfiddle.net/qaho8hjt/6/
$('.my-textbox').keyup(function() {
var value = $(this).val();
var exp = new RegExp('^' + value, 'i');
$('.change_req .orizontala').each(function() {
var isMatch = exp.test($('.projectName', this).text());
$(this).toggle(isMatch);
});
});
The problem is that i don't know how to hide the parent div. I can only hide the div that i search for.
Thank you.
Edit: Thank you all for you're responses.
Code is almost fine, just that you are hiding the div that has the content where you should be hiding its immediate parent, demo
replace
$(this).toggle(isMatch);
with
$(this).parent().toggle(isMatch);
You can use closest() to get the nearest containing div. Try this:
$(this).closest('.change_req').toggle(isMatch);
Updated fiddle
Try like this:
$(this).parent().toggle(isMatch);
See your edited code here.

jQuery copy content and remove class from it before appending

I want to clone the content of the div using jQuery, but from the copied content I want to find a class active and remove it before I use appendTo function.
So for example, I have this code:
<div class="box">
<p>text</p>
<div class="random active"></div>
</div>
I can copy the above code using this:
var content = $(this).find('.box').html();
Now how can I find the class active from the var content and remove it before I can appendTo?
Please note, I do not want to remove class from actual div from where I copied the content, I just want to remove from the copied code so that it is not included in the clone div.
Thanks.
Try,
var content = $(this).find('.active').removeClass('active').closest('.box').html();
As per your new request,
var content = $(this).find('.box').clone().find('.active').removeClass('active');
My way to solve the problem:
var content = $(this).find('.box').children().clone().removeClass("active");
content is a jQuery array with the content of .box (a clone of the content) with all element without active class.
An alternative:
If you need to remove the class only from an element you can add a step:
var content = $(this).find('.box').children().clone();
content.find(".random").removeClass("active");
How can you use content variable:
Right now you can .appendTo() content where you need:
content.appendTo("body"); //for example
Debug code:
To use: alert(content.html()) try this:
var content = $(this).find('.box').clone();
content.children().removeClass("active");
alert(content.html()); //HTML string but it seems the best way to use DOM
but is better this way, using console:
var content = $(this).find('.box').children().clone().removeClass("active");
console.log(content); // array of jQuery objects not simply HTML string
An example:
example: http://jsfiddle.net/Frogmouth/4dYM4/1/
enjoy, Frog.
You can do:
$(content).find('.active').remove().appendTo('body');
Try
content = $(content).find('.active').removeClass('active')
Updated after OP's comment
Fiddle Demo
var content = $(this).find('.box').clone();
content = content.find('.active').removeClass('active').closest('.box');
alert(content.html());
You can do this.
var content = $(this).find('.box').clone();
$(content).find('.active').removeClass('active');
Best way, to remove and append element
content = $('#content').clone();
$('#content').remove();
content.appendTo('#perntElement');

jQuery get content between <div> tags

This'll probably be easy for someone:
var x = '<p>blah</p><div><img src="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=bsr&FlightID=2997227&Page=&PluID=0&Pos=9088" border=0 width=300 height=250></div>';
How do I extract only the portion between the div tags <div>I want this</div>
Don't focus on the <a> tag as the content could be different inside the div.
This is probably what you need:
$('div').html();
demo
This says get the div and return all the contents inside it. See more here: http://api.jquery.com/html/
If you had many divs on the page and needed to target just one, you could set an id on the div and call it like so
$('#whatever').html();
where whatever is the id
EDIT
Now that you have clarified your question re this being a string, here is a way to do it with vanilla js:
var l = x.length;
var y = x.indexOf('<div>');
var s = x.slice(y,l);
alert(s);
Demo Here
get the length of the string.
find out where the first div occurs
slice the content there.
jQuery has two methods
// First. Get content as HTML
$("#my_div_id").html();
// Second. Get content as text
$("#my_div_id").text();
Give the div a class or id and do something like this:
$("#example").get().innerHTML;
That works at the DOM level.
Use the below where x is the variable which holds the markup in question.
$(x).find("div").html();
use jquery for that:
$("#divId").html()
I suggest that you give an if to the div than:
$("#my_div_id").html();
var x = '<p>blah</p><div><img src="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=bsr&FlightID=2997227&Page=&PluID=0&Pos=9088" border=0 width=300 height=250></div>';
$(x).children('div').html();
Use the text method [text()] to get text in the div element,
by identifing the element by class or id.
This work for me
var content = '<p> demp text </p>';
$('#wordContent').html(content);
$('#wordContent').html($('#wordContent').text());

JQuery: How do I get a DID ID?

I have the following HTML:
<div class="house">...</div>
But in my code I dynamically insert in DIV ID's to make the code then look like this:
<div class="house" id="id_1">...</div>
Question: How can I get the DIV ID by only knowing the CLASS using JQuery? I've tried something like the following but it doesn't work.
$('.house').getID();
$('div.house')
.each(function(index) {
alert( 'id for this div.class #'+index+': '+$(this).attr('id') );
});
Use the jQuery.attr() method to get and set attributes.
var houseId = $('.house').attr('id');
Note: This will only get the last '.house' element in the DOM's id.
I believe that
$('.house').attr("id");
Should work. I didn't test it though.

Categories

Resources