Exclude particular class name in CSS selector using html dom - html

I want to import only texts that contain only class="item-name"
Not and class="item-name active"
How do you think I could apply the import?
The HTML code is :
<li class="list-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a class="item" itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/">
<span class="item-name" itemprop="name">Category</span>
</a>
</li>
<li class="list-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a class="item" itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/outlet">
<span class="item-name" itemprop="name">Category 1</span>
</a>
</li>
<li class="list-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a class="item" itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/outlet/fragrance">
<span class="item-name" itemprop="name">Category 2</span>
</a>
</li>
<li class="list-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span class="active-item" itemscope itemtype="http://schema.org/Thing" itemprop="item">
<span class="item-name active" itemprop="name">Title</span>
</span>
</li>
My php code :
if ($html !== false) {
$prod['id']=$html->find('span.code',0)->plaintext;
$j=0;
while (isset($html->find('span.item-name',$j)->plaintext)) {
$cats[]=str_replace(['.',';'],' ',html_entity_decode($html->find('span.item-name',$j)->plaintext));
$j++;
}
$prod['category']=implode(', ',$cats);
unset($cats);
}
UPDATE I fix
if ($html !== false) {
$prod['id']=$html->find('span.code',0)->plaintext;
$j=0;
while (isset($html->find('a.item',$j)->plaintext)) {
$cats[]=str_replace([' ','&#39',';'],' ',html_entity_decode($html->find('a.item',$j)->plaintext));
$new = preg_replace(['(\s+)u', '(^\s|\s$)u'], [' ', ''], $cats);
$j++;
}
$prod['category']=implode(', ',$new);
unset($new);
}

Related

How to implement schema.org markup for a breadcrumb with image?

The correct inline implementation of breadcrumb should be something like this
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses">
<span itemprop="name">Dresses</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Real Dresses</span></a>
<meta itemprop="position" content="2" />
</li>
</ol>
but in my case I have a brand logo in first position and google complain for missing name
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses">
<span itemprop="name"><img src="logo.svg" alt="Brand" width="56" height="60"></span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Real Dresses</span></a>
<meta itemprop="position" content="2" />
</li>
</ol>
Is it possible a correct inline code without adding a visible text?
looks like name is required in any case
try adding a name, and to the to meta tag, instead of span to avoid it being displayed
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses">
<img src="logo.svg" alt="Brand" width="56" height="60"></a>
<meta itemprop="name" content="dresses" />
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Real Dresses</span></a>
<meta itemprop="position" content="2" />
</li>
</ol>
you could also use image license:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses" itemtype="http://schema.org/ImageObject" itemscope itemid="https://example.com/dresses" >
<link itemprop="contentUrl" href="https://example.com/logo.svg" />
<link itemprop="license" href="https://example.com/license" />
<link itemprop="acquireLicensePage" href="https://example.com/how-to-use-my-images" />
<img src="logo.svg" alt="Brand" width="56" height="60">
</a>
<meta itemprop="name" content="dresses" />
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Real Dresses</span></a>
<meta itemprop="position" content="2" />
</li>
</ol>

Jquery filter - html elements

How to filter html elements using Jquery function ?
Below is the html structure. I want to get the value of 2nd span which is inside a tag warpped in a li item ?
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span> ----- **How to filter and find this element value based on the message span value ?
</a>
</li>
```````````````
I need a condition like in li if span's value = "Item3", get the below span.icon's value
Couple of ways to do it. One way is with has and contains.
$("li:has(span.icon:contains('Icon_3'))").addClass("selected")
.selected {
background-color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span>
</a>
</li>
</ul>
And now based on the information you provided.....
var text = $("span.message:contains(Item3) + span.icon").text()
console.log(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span>
</a>
</li>
</ul>
or how most people would do it.
var messageElem = $("span.message").filter(function(){ return this.textContent === "Item3" });
var text = messageElem.next("span.icon").text();
console.log(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span>
</a>
</li>
</ul>
I'd prefer this, because :contains() seeks the matching string and not exact string. That is why, using filter is better :)
var choice = $("li span.message").filter(function(){
return $(this).text().trim() === "Item3";
}).next('span.icon');
//If there is only one item with text "Item3"
console.log(choice.text());
//If there are multiple items
choice.each(function(){
console.log($(this).text());
});
.selected {
background-color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span>
</a>
</li>
</ul>
Code:
$('li span.icon')
It should work

Correct microdata markup for breadcrumbs

On researching how to do microdata for webpage breadcrumbs, I've found a couple of methods and I'm not sure which is correct. Firstly, my basic breadcrumbs in the HTML look like this:
<div>
Root page
Category page
This page
</div>
Now, do I structure it like this (as I've seen in an example on SchemaOrg:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/" itemprop="item">
<span itemprop="name">Root page</span>
</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/category" itemprop="item">
<span itemprop="name">Category page</span>
</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/category/this-page" itemprop="item">
<span itemprop="name">This page</span>
</a>
</li>
</ol>
Or do I structure it like the below as I've seen in some Stackoverflow answers:
<div>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/" itemprop="url">
<span itemprop="title">Root page</span>
</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/category" itemprop="url">
<span itemprop="title">Category page</span>
</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/category/this-page" itemprop="url">
<span itemprop="title">This page</span>
</a>
</span>
</div>
Or a different method I don't know about yet??
Modern (2019) correct breadcrumbs Microdata markup is like provided below.
And if you want to complain best practices do not make the last breadcrumb item as a link on your page - you can use <span> instead of <a> in a such manner:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/" itemid="/">
<span itemprop="name">Root page</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/category" itemid="/category">
<span itemprop="name">Category page</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/category/this-page">
<span itemprop="name">This page</span>
</span>
<meta itemprop="position" content="3" />
</li>
</ol>
This code is fully compliant to BreadcrumbList (see also that item's id is required) and passes Google validation on https://search.google.com/structured-data/testing-tool excellent.
I would do something like :
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Homepage</span>
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Child-A</span>
</div>
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Child-B</span>
</div>
</div>
Tested on : https://search.google.com/structured-data/testing-tool
Use Schema.org as data-vocabulary.org is abandoned.
There were a few markups when the idea came up. But since then the standard has arrised as being Schema.org. It's of course supported by Google and given in its examples (one is BreadCrumbs).
The second is not part of schema.org, it uses a different vocabulary from data-vocabulary so I can't comment on if it works. The first is microdata using schema.org, which is the type given in google's breadcrumb examples.
Only structured data including Schema.org links uses schema.org - but you can use <div> and <span> with Schema.org if you want to. Structured data gives the meaning of the page and should for the most part be independent to how it appears visually, meaning that it doesn't matter whether you use bullet points or <div>s for your breadcrumbs, the structured data will work in the same way for both and have the same meaning.
It might be a subjective decision to be made. I would prefer Microdata method from Google as shown at https://developers.google.com/structured-data/breadcrumbs which follows ol/li method.
As long as you mention itemscope, itemptype and itemprop properly, it should't matter much which method you use.
you need to use "name" not "title", read all about it on in the docs: https://developers.google.com/search/docs/data-types/breadcrumbs
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" class="" href="https://exampe.com/">
<span itemprop="name">Root page</span></a>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" class="" href="https://exampe.com/category">
<span itemprop="name">Category page</span></a>
<meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" class="" href="https://exampe.com/category/this-page">
<span itemprop="name">This page</span></a>
<meta itemprop="position" content="3">
</li>
</ol>
To fix Fix Breadcrumbs markup in Google Search Console about missing field "id" , I just removed property itemscope from anchor
from
<a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="..">link</a>
to
<a itemtype="http://schema.org/Thing" itemprop="item" href="..">
and it worked. I tested and checked this on 2 websites that I got that error.

Reduce spacing between booststrap list-inline elements

I'm using bootstrap list-inline class to style my breadcrumbs but I don't like the spacing between the elements. How do I reduce the spacing between John, Jane and David ?
Here's how it currently looks
<ul class="list-inline">
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.google.com" itemprop="url">
<span itemprop="title">John</span>
</a> >
</div>
</li>
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.yahoo.com" itemprop="url">
<span itemprop="title">Jane</span>
</a> >
</div>
</li>
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.msn.com" itemprop="url">
<span itemprop="title">David</span>
</a>
</div>
</ul>
</li>
You can override the base css and add a negative margin to the li elements like so:
.list-inline>li {
margin-right: -10px;
}
Run the below code snippet to see what this produces.
.list-inline>li {
margin-right: -10px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul class="list-inline">
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.google.com" itemprop="url">
<span itemprop="title">John</span>
</a> >
</div>
</li>
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.yahoo.com" itemprop="url">
<span itemprop="title">Jane</span>
</a> >
</div>
</li>
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.msn.com" itemprop="url">
<span itemprop="title">David</span>
</a>
</div>
</li>
</ul>
One of the options is to remove the padding from elements with css.
.no-left-gutter{padding-left:0;}
And add this class to li or a elements.
<li class="no-left-gutter">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.google.com" itemprop="url" class=no-left-gutter>
<span itemprop="title">John</span>
</a>
</div>
</li>
can be fixed by funky code formatting...
<ul class="list-inline">
<li>
List Item One</li><li>
List Item Two</li><li>
List Item Three</li>
</ul>
can be fixed by adding html comments...
<ul class="list-inline">
<li>List Item One</li><!--
--><li>List Item Two</li><!--
--><li>List Item Three</li>
</ul>

Bootstrap breadcrumb styling with schema data

I'm new to bootstrap and trying to style the breadcrumb. I tried this and it gives me the proper inline layout I want.
<div class="BreadCrumbs">
<a href="www.yahoo.com" >Yahoo</a>
<span class="divider" > > </span>
<a href="www.example.com" >Example</a>
<span class="divider" > > </span> Google
</div>
But I want to add schema data and still maintain the proper styling. So I tried this but all the links are in different lines. How do I get them to be inline in one single line?
<div class = "BreadCrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.yahoo.com" itemprop="url">
<span itemprop="title">Yahoo</span>
</a> ›
</div>
<div class = "BreadCrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.example.com" itemprop="url">
<span itemprop="title">Example</span>
</a> ›
</div>
<div class = "BreadCrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.google.com" itemprop="url">
<span itemprop="title">Google</span>
</a>
</div>
From Google: https://developers.google.com/search/docs/data-types/breadcrumbs
Use a list and then style the li elements inline
.breadcrumbs li {
display: inline;
}
<div class="breadcrumbs">
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/books">
<span itemprop="name">Books</span>
<img itemprop="image" src="http://example.com/images/icon-bookicon.png" alt="Books"/></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/books/sciencefiction">
<span itemprop="name">Science Fiction</span>
<img itemprop="image" src="http://example.com/images/icon-science-fiction.png" alt="Genre: Science Fiction"/></a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/books/sciencefiction/ancillaryjustice">
<span itemprop="name">Ancillary Justice</span>
<img itemprop="image" src="http://example.com/images/cover-ancillary-justice.png" alt="Ancillary Justice"/></a>
<meta itemprop="position" content="3" />
</li>
</ol>
</div>