how would i get index number of div class="age" using simple html dom?
<div class="main">
<div id="names">
<div class="name">...</div>
<div class="subject">...</div>
<div class="class">...</div>
<div class="age">...</div>
</div>
</div>
var parent = document.getElementById('names');
var c = parent.children;
for (var i=0; i< c.length; i++)
if (c[i].classList.contains('age'))
console.log('Found at index '+ i);
<div class="main">
<div id="names">
<div class="name">...</div>
<div class="subject">...</div>
<div class="class">...</div>
<div class="age">...</div>
</div>
</div>
if you want the index of div class="age" in the div class="name" then this should work fine.
console.log($(".age").index());
$('#names div').index($('#names > .age'))
This will get the index of the div class="age" starting from 0
With simple-html-dom you need to jump through some hoops:
$el = $html->find('.age', 0);
$i = 0; // start at 0
while($el = $el->previousSibling()) $i++;
echo $i; // 3
Related
I should insert the answer to an ajax post response inside a div created using the javascript document.createElement ('div') function;
the code i am trying is the following:
i try to load variable idx in p with id=idx_h
but don't work.
Thank you for help me.
success: function(data) {
var objJSON = JSON.parse(data);
var idx=objJSON.idx;
const div = document.createElement('div');
div.className = 'row';
div.innerHTML = `
<div class="container-fluid " id="border<?php echo($_COOKIE['idx']);?>">
<div class="row ">
<div class="col">
<div class="input-group mt-1" >
<span class="input-group-text text-large ">R</span>
<div contenteditable="true"
class="input-group-text text-large "
data-old_value="<?php echo $d['rep_sessione'] ;?>"
onInput="saveInlineEdit(this,'rep_sessione','${<p id="idx_h"></p> }' )"
<!--this-->
onClick="highlightEdit(this);">
<?php echo $d['rep_sessione']; ?>
</div>
</div>`;
document.getElementById('link<?php echo $d->id;?>').append(div);
document.getElementById("idx_h").innerHTML =idx ;
}
When I'm searching the specific name of the image. The rest of the name of the row still showing, but I just want to view only the data from the search. See image below
Display: Select all the data from the database.
<?php$checkQuery = "SELECT `h_business_logo`,`h_business_name`,`h_business_desc` FROM user_bsns WHERE h_isActive = 1 ORDER BY h_business_name DESC";
$checkResult = mysqli_query($db->conn, "$checkQuery")
?>
Card: This card has an animation
<div class="card-body col-lg-12" >
<div class="card-body col-lg-12">
<input class="form-control" id="myInput" type="text" placeholder="Search.." style="float:left; width:25%;">
<button class="btn" style="margin-left: 5px;background-color: #e72329;color: white;"> Search </button>
</div>
<?php
if(mysqli_num_rows($checkResult) > 0):{
}
while($row = mysqli_fetch_array($checkResult)){
?>
<div class="panel" id="myDIV">
<div class="holder flipH" >
<div class="card shadow-none">
<div class="col-sm-0 column <?=$row['h_business_name'];?>" >
<div class="front"style="float:left; >
<img src="<?=$row['h_business_logo']; ?> "
style="height:150px; width:155px; border-radius: 50%; ">
</div>
</div>
<span style= "text-align:center;">
<h5><?=$row['h_business_name'];?></h5>
</span>
<span style="text-align:center;">
<p><?=$row['h_business_desc'];?></p>
</span>
</div>
</div>
</div>
<?php
}
endif;
?>
</div>
<!-- /.card-body -->
</div>
And this one is the function of the search filter.
<script>
$(document).ready(function(){
$(".btn").on("click", function() {
var value = $("#myInput").val();
lastval = "col-sm-5 column "+value;
x = document.getElementsByClassName("column");
$("#myDIV div").filter(function() {
for (i = 0; i < x.length; i++) {
element = x[i];
if (element.className.indexOf(value) == -1){
element.classList.add("nonshow");
element.classList.remove("show");
}
else {
element.classList.add("show");
element.classList.remove("nonshow");
}
}
});
});
});
</script>
Please help me to improve the codes.
Update: I solved my problem using this script(jquery)
update: I used this script in order to search automatically.
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myDiv ").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
It is my ajax call that is returning me the data.
By using ajax call I'm fetching data and appending it but by append it add a new row where as I want to append that data side by side.
$.get(base_url+'/get_membership_plan',function(data)
{
var units_range = 0; var i=1;
var membershipLength = data.length ;
var plan_type='halfyearly'; var discount_factor=0; var months = 1;
$.each(data,function(index,subcatObj)
{
$('#plans').append('
<div class="item">
<div class="item-container">
<h2>1st Year <br> Discount <br> 10%</h2>
<div class="units-price">
<span class="t-units">1-30 UNITs</span>
<span class="t-price">$30.00</span>
</div>
<div class="net-price"><span class="net-price-e">Net Price</span>
<span class="red-price">$27.00</span>
</div>
</div>
<div class="select-btn">Select Plan
</div>
</div>
');
});
});
I need to reinitialize my carousel when I am updating my div section by this way
$('#plans').trigger('add.owl.carousel', ['<div>....']).trigger('refresh.owl.carousel');
HTML
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><?=$title?></h3>
</div>
<!-- /.col-lg-12 -->
<p>
<ol id="valueList">
aa
</ol>
</p>
</div>
</div>
This is my AJAX code this code doesn't show any error only the problem is doesn't show in the HTML
firebase.initializeApp(config);
database = firebase.database();
var refDeleafing = database.ref('Deleafing');
refDeleafing.on('value', gotDataDeleafing, errData);
function gotDataDeleafing(data) {
var blocks = data.val();
var keys = Object.keys(blocks);
console.log(keys);
for(var i = 0; i < keys.length; i++) {
var k = keys[i];
var deleafingBlock = blocks[k].deleafingBlock;
var li = document.createElement('deleafingBlock');
$(li).parent("valueList");
}
if i will use the li.parent("valueList"); it show an error parent is not a function. is there anyway how to work it?
function ClickParent(ClickElem,ElemFind)
{
$("."+ClickElem).click(function() {
var GetGrp = $(this).parents(".group");
GetGrp.find("."+ElemFind).fadeToggle();
});
}
// Find one level
ClickParent('name','moreinfo');
// Find another level
ClickParent('moreinfo','evenmore');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="group">
I am
How are you?
<div class="moreinfo" style="display: none;">
Fine
</div>
<div class="evenmore" style="display: none;">
Even more stuff.
</div>
</div>
How to show content of moreinfo class next to group class with no space gap.so if more content is there then they show as like passage. how to achive it?
-
The problem is that the div is a block element, so try span instead
function ClickParent(ClickElem, ElemFind) {
$("." + ClickElem).click(function() {
var GetGrp = $(this).parents(".group");
GetGrp.find("." + ElemFind).fadeToggle();
});
}
// Find one level
ClickParent('name', 'moreinfo');
// Find another level
ClickParent('moreinfo', 'evenmore');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="group">
I am
How are you?
<span class="moreinfo" style="display: none;">
Fine
</span>
<span class="evenmore" style="display: none;">
Even more stuff.
</span>
</div>