找到
父ID,您可以使用
reduce
检查家长的ID然后
.find
光靠自己是不够的:
const result = data.reduce((a, { url, children, id }) => {
if (a) return a;
if (url.includes(query)) return id;
const foundChild = children.find(({ url }) => url.includes(query));
if (foundChild) return foundChild.id;
}, null);
const data = [
{
"id": 23,
"name": "Shop All",
"url": "/shop-all/",
"children": []
},
{
"id": 18,
"name": "Servers",
"url": "/Servers/",
"children": [
{
"id": 26,
"name": "Blade Servers",
"url": "/servers/blade-servers/"
},
{
"id": 24,
"name": "Rack Servers",
"url": "/servers/rack-servers/"
},
{
"id": 25,
"name": "Tower Servers",
"url": "/servers/tower-servers/"
},
{
"id": 27,
"name": "Workstations",
"url": "/servers/workstations/"
}
]
}
];
$('.btn').click(e=> getID($(e.target).html()) );
function getID(query){
/* reset */
$('.results').html('');
$('.err').html('');
/* search for "query" */
try {
const result = data.reduce((a, { url, children, id }) => {
if (a) return a;
if (url.includes(query)) return id;
const foundChild = children.find(({ url }) => url.includes(query));
if (foundChild) return foundChild.id;
}, null)
$('.results').html(`<div class="res-c">${result}</div>`);
} catch(er) {
$('.err').html(`<div class="err-c">${er}</div>`)
}
}
body {
background: #20262e;
color: #fff;
font-family: monospace;
font-size: 25px;
}
.res-c {
color: #6CE891;
padding: 0.5em;
margin: 0.5em;
border: 2px solid #6CE891;
border-radius: 5px;
}
.err-c {
color: #ff4f68;
padding: 0.5em;
margin: 0.5em;
border: 2px solid #ff4f68;
border-radius: 5px;
}
.buttons{
margin: 0.5em;
margin-bottom: 1em;
}
.btn {
font-size: 20px;
border: 2px solid #fff;
border-radius: 5px;
padding: 0.5em;
}
.btn:hover {
background: #fff;
color: #20262e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<a class="btn">shop-all</a>
<a class="btn">blade-servers</a>
</div>
<div class="results"></div>
<div class="err"></div>
