This question already has answers here:
Using jQuery, how do you find only visible elements and leave hidden elements alone?
(4 answers)
Closed 3 years ago.
I'm trying to match visible object's text but ignore not visible ones. By the way I need HTML code.
Here is my codepen.
Here is my HTML:
<div class="main">
<div class="a">Hello</div>
<div class="hid">Hello</div>
<div class="b">Hello</div>
<div class="hid2">Hello</div>
<div class="c">Hello</div>
<div class="hid3">Hello</div>
<div class="hid4">Hello</div>
</div>
My CSS:
.hid, .hid2, .hid3, .hid4{
display: none;
}
My JavaScript:
var regEx = /Hello/g;
var main = $('.main').html();
var matches = main.match(regEx);
console.log(matches);
Actually I want to exclude invisible elements without removing them from page. I want these HTML codes at the result:
<div class="a">Hello</div>
<div class="b">Hello</div>
<div class="c">Hello</div>
I don't want to remove the hidden objects because I'll use them interactively. I just want to exclude them from match. We can use jQuery.
Thank you from now.
You can try with :visible selector like $('.main div:visible')
var visible = $('.main div:visible').map((_,i) => i.outerHTML).get();
console.log(visible);
.hid, .hid2, .hid3, .hid4{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="a">Hello</div>
<div class="hid">Hello</div>
<div class="b">Hello</div>
<div class="hid2">Hello</div>
<div class="c">Hello</div>
<div class="hid3">Hello</div>
<div class="hid4">Hello</div>
</div>
You can use the :visible selector to find all the divs under .main which are not hidden, and then output their outerHTML value if they match the regex:
var regEx = /Hello/g;
var visible = $('.main div:visible');
visible.each(function () {
if ($(this).text().match(regEx)) {
console.log(this.outerHTML)
}
});
.hid, .hid2, .hid3, .hid4{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="a">Hello</div>
<div class="hid">Hello</div>
<div class="b">Hllo</div>
<div class="hid2">Hello</div>
<div class="c">Hello</div>
<div class="hid3">Hello</div>
<div class="hid4">Hello</div>
</div>
var regEx = /Hello/g;
$(".main div:visible").each(function(val, html){
let inerHTML = $(this).html();
console.log(inerHTML.match(regEx))
})
Related
having a difficult time removing a div inside of a cloned element. run the snippet and notice the do not clone me part gets appended even though it is removed.
let myhtml = `<div style="border: 1px solid black;" class="mycontainer">
clone me
<div class="noClone">
do not clone me
</div>
<button class="clonebtn"> clone it </button>
</div>`
$(document).ready(function() {
let content = $(myhtml);
$('.row').append(content);
$('.row').on('click', '.clonebtn', function() {
let container = $(this).closest('.mycontainer');
let clonedContainer = container.clone();
clonedContainer.remove('.noClone');
$('.row').append(clonedContainer);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
</div>
</div>
or run the fiddle here https://jsfiddle.net/k6jz9xe2/3/
You need to use .find() to find all elements inside the parent div with a class of noClone to remove.
$(selector).remove(anotherselector) in jQuery only removes any elements matching anotherselector from the Array returned by selector. The selector given to the remove() function is only applied to the elements contained in the jQuery collection not to the children of those elements. It is analogous to $(selector).filter(anotherselector).remove().
Consider the following HTML and jQuery code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
Foo
<div id="bar">Bar</div>
</div>
<script>
$('#foo').remove('#bar');
</script>
You may expect that the div with the id "bar" inside the div with the id "foo" will be removed, but this is not the case. Why? The $('#foo') selector returns an Array with just one item: the div with the id of "foo". jQuery attempts to filter through the Array and find an element matching the $('#bar') selector. No element is found and nothing will happen.
The following selector, however, will remove the div with the id of "bar".
$('div').remove('#bar');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
Foo
<div id="bar">Bar</div>
</div>
<script>
$('div').remove('#bar');
</script>
The $('div') selector returns an Array with all the divs on the page. jQuery filters through all of the divs to find an div matching the $('#bar') selector (having an id of "bar"). Having found one, it removes it.
let myhtml = `<div style="border: 1px solid black;" class="mycontainer">
clone me
<div class="noClone">
do not clone me
</div>
<button class="clonebtn"> clone it </button>
</div>`;
$(document).ready(function() {
let content = $(myhtml);
$('.row').append(content);
$('.row').on('click', '.clonebtn', function() {
let container = $(this).closest('.mycontainer');
let clonedContainer = container.clone();
clonedContainer.find('.noClone').remove();
$('.row').append(clonedContainer);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
</div>
</div>
let myhtml = `<div style="border: 1px solid black;" class="mycontainer">
clone me
<div class="noClone">
do not clone me
</div>
<button class="clonebtn"> clone it </button>
</div>`
$(document).ready(function() {
let content = $(myhtml);
$('.row').append(content);
$('.row').on('click', '.clonebtn', function() {
let container = $(this).closest('.mycontainer');
let clonedContainer = container.clone();
clonedContainer.find('.noClone').remove();
$('.row').append(clonedContainer);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
</div>
</div>
I have a Div element on my HTML page, and that DIV is coming from an ASP.NET application, so the DIV ID is changing all the time but few words remain the same in that id.
For example:
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGrid"> </div>
The only things which remains same all the time in above example are "_UWT" & "_NewGrid".
I know how to get the by Exact ID or atleast by using the 1 word in this: $( "div[id$='_UWT']" )
But I need to get this Div element by using the multiple parameters:
I need to check the "_UWT" and "_NewGrid" also.
If both words exist in the Div id, then return me the element only.
I need to get this DIV by JQuery.
I know I can set the ClientID to Static from ASP.NET, but that is not doable in my case.
Thanks.
To achieve this you can combine the 'attribute contains' selector (to find the _UWT) and the 'attribute ends with' selector (to find the _WebGrid), like this:
$('div[id*="UWT"][id$="_NewGrid"]').addClass('foo');
.foo {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00_ctl01_ctl00_ctl04_NewGrid">Not this one</div>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04">Not this one</div>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04_NewGrid">This one</div>
One way could be:
$('div').each(function() {
if($(this).attr('id').includes('_NewGrid') && $(this).attr('id').includes('_UWT')) {
console.log($('div').attr('id'));
$(this).css('color','red') // do whatever you want with div
}
})
Demo:
$('div').each(function() {
if($(this).attr('id').includes('_NewGrid') && $(this).attr('id').includes('_UWT')) {
console.log($('div').attr('id'));
$(this).css('color','red')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGrid">11111</div>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGri">222222222</div>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__ctl01_ctl00_ctl04
_NewGrid">3333333333333</div>
Try following way:
Add specific class I added here item-collection:
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGrid">Div 1</div>
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04">Div 2</div>
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00_ctl01_ctl00_ctl04
_NewGrid">Div 3</div>
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00_ctl01_ctl00_ctl04
_NewGrid">Div 4</div>
JS is:
var itemslist = [];
$(".item-collection").each(function(){
if($(this).attr("id").indexOf("_UWT") > -1 && $(this).attr("id").indexOf("_NewGrid")){
itemslist.push($(this))
}
})
console.log(itemslist);
I'm trying to show hidden rows one at a time on button click, but they all show at once since they have class "row" - the 1st row is shown by default and the rest are hidden
I can't use Id selectors since it's server side and dynamic, so how can I only show the immediate next row/sibling on each click until there are none left? I could append a counter to each row class but that wouldn't help when trying to select the next row in jQuery with that counter
This is what I have which shows all rows on one click
<script>
$(".myButton").click(function() {
$('.container .row').next('.row:hidden').slideDown();
});
</script>
<div class="container">
<!-- 1st row not hidden by default -->
<div class="row">
<div class="row">
<div class="row">
</div>
Thanks for help in advance!
$('.container .row:visible').last().next('.row:hidden').slideDown();
If all you're doing is showing them in a sequential order, then you don't need to track which are active. You can simply use the visibility to always choose the last.
All you do is add the :visible to the row selection, to find all visible rows; then use the last() method to only reference the last of that stack. This allows next() to be called for only one element (the last one), and not all the rows in the container.
To simplify this even more (and call fewer methods), you could choose to only select the first hidden row: $('.container .row:hidden:first').slideDown(); or $('.container .row:hidden').first().slideDown();
Fiddle
If you add the class "selected" to the first row than you could do this:
<script>
$(".myButton").click(function() {
$('.container .row.selected')
.removeClass('selected')
.hide()
.next()
.addClass('selected')
.slideDown();
);
</script>
<div class="container">
<div class="row selected">
<div class="row">
<div class="row">
</div>
You could try iterating through the collection to display the correct one. See this JSFiddle: http://jsfiddle.net/gjqb6m83/
var i = 0;
var collection = $(".row");
$(".myButton").click(function() {
$(collection).css('display', 'none');
$(collection[i]).slideDown();
i++
i = i % collection.length;
});
you can use :nth-child()
$(document).ready(function() {
var counter = 1;
$(".myButton").click(function() {
counter++;
$('.container .row').hide();
$('.container .row:nth-child(' + counter + ')').slideDown();
});
});
.row {
display:none;
}
.row:nth-child(1) {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="myButton">My Button</button>
<div class="container">
<div class="row">row 1</div>
<div class="row">row 2</div>
<div class="row">row 3</div>
<div class="row">row 4</div>
<div class="row">row 5</div>
</div>
Make use of another jQuery-pseudo-selector :first
$(".myButton").click(function() {
$('.container .row:hidden:first').slideDown()
});
and dont forget to close your divs! Look at https://jsfiddle.net/kswmktce/1/
Yet another solution. This one shows just one at a time, and starts over when finished.
$(".myButton").click(function() {
$(".row:visible").next().slideDown();
$(".row:visible").first().hide();
if (!$(".row:visible").length)
$(".row").first().slideDown();
});
.row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="myButton">Click ME</button>
<div class="container">
<div class="row">a</div>
<div class="row">b</div>
<div class="row">c</div>
<div class="row">d</div>
<div class="row">e</div>
</div>
So my code always follows the same kind of format:
<div id="container">
<div id="firstDiv">
</div>
</div>
Sometimes it's like this (and this is what I want to ignore):
<div id="container">
<div id="banner">
</div>
<div id="firstDiv">
</div>
</div>
So what I want to do is
IF the first div inside #container is equal to #firstDiv - add a banner. else (there's already a banner there) do nothing.
Any help with this would be great!!
Thanks!!
You can do that:
if($('#container > div:first').attr('id') == 'banner') {
//banner exists
} else {
//banner not exists
}
Use a child selector:
div#container > div#firstDiv
You can
$('#firstDiv:first-child').before('<div class="banner">banner</div>');
$('#firstDiv2:first-child').before('<div class="banner">banner</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="firstDiv">Div</div>
</div>
<div id="container2">
<div id="banner">Banner</div>
<div id="firstDiv2">Div</div>
</div>
Try this:
if($("#container").find("#banner").lenght == 0){
// You have the banner
}else{
// you dont`n have the banner
}
try this:
(function(){
if(!$('#firstDiv','#container').length){
$('#container').prepend(jQuery('<div id="firstDiv">'));
}
})(jQuery);
With the children() selector you get all the children element of #container.
With the first() you get the first one, and with attr('id') you get the id name.
Then you just have to check what id name you have
Example:
if($("#container").children().first().attr('id') != "banner"){
addBanner();
}
I'm trying to use jQuery to loop through classes and append some text to an HTML element. I'm working with the following HTML (example case):
<div class="question">
<div class="title">
<strong>Here's the question title.</strong>
</div>
<div class="choice">Here's choice1.</div>
<div class="choice">Here's choice2.</div>
</div>
<div class="question">
<div class="title">
<strong>Here's the question title.</strong>
</div>
<div class="choice">Here's choice1.</div>
<div class="choice">Here's choice2.</div>
</div>
So what I'm trying to do is loop through each question on the page, see if the title matches some string, then append some text based on that statement. I have the following:
$('.question').each(function() {
var title = $(this).find('.title').innerHTML;
$('.choice').each(function() {
var span = document.createElement("span");
if (title == "someString")
{
span.className = "someClass";
}
else
{
span.className = "someOtherClass";
}
var text = document.createTextNode("text");
span.appendChild(text);
$(this).appendChild(span);
});
// put this in to see if outer loop was working
document.body.style.backgroundColor = "orange";
});
The text will change color based on what the title is, hence the different CSS classes. But it doesn't seem to be doing anything, not even appending the text to each choice. The background color does change to orange, and Chrome isn't throwing any errors from the script in the developer tools, so I'm totally lost. Can anyone help?
You can get the title like this:
var title = $(this).find('.title strong').text();
Here you're confusing jquery with native javascript, $(this) is a jquery object so you cannot use appendChild() here's how you change that:
$(this).get(0).appendChild(span);
Or you can use jQuery directly:
$(this).append(span);
Using Arun P Johny's fiddle, I've updated a few things;
FIDDLE
The following are the important changes;
var title = $.trim($(this).find('.title').text());
$(this).find('.choice').each(function () {...
Changing $('.choice') to $(this).find('.choice') because you only want to change the elements within that question, not every choice element on the page.
and find('.title').innerHTML; to find('.title').text()); because you only want to match the text within that div, not the html as well.
Something like this?:
Jsfiddle
jQuery ( Comment free code in the jsfiddle ):
// On document ready...
$(function () {
// Geat each title element...
$('.title').each(function () {
// Points to each title element as defined above
var title = $(this),
// Get all siblings of title element(s)
choices = title.siblings(),
// Ternary if statement. Equivalent to if ( X ) {} else {}
myClass = title.text().trim() === "Here's the question title." ? "someClass" : "someOtherClass";
// Make a span element...
$('<span />', {
class: myClass, // Give it a class
text: " Appended text" // Give it some text
}).appendTo(choices); // Append the span to each .choice element
});
});
Html:
<div class="question">
<div class="title"><strong>Here's the question title.</strong></div>
<div class="choice">Here's choice1.</div>
<div class="choice">Here's choice2.</div>
</div>
<div class="question">
<div class="title"><strong>Here's the question title.</strong></div>
<div class="choice">Here's choice1.</div>
<div class="choice">Here's choice2.</div>
</div>
<div class="question">
<div class="title"><strong>Here's title.</strong></div>
<div class="choice">Here's choice1.</div>
<div class="choice">Here's choice2.</div>
</div>
Css:
.someClass {
color: red;
}
.someOtherClass {
color: green;
}
.question { margin: 10px 0px; }