javascript - 如何在 ul-li-a 中获取 div 并使 div 的文本内部相等
问题描述
我在搜索按钮中有一个缓存列表,一旦我选择其中一个,它应该触发菜单并选择正确的菜单。但是,我无法弄清楚如何将innerText
adiv
与搜索区域中选择的 a 进行比较。两者都a
应该div
是可见的。
$(function() {
function filterTable(tbl, term) {
$("ul li a", tbl).show();
$("ul li a", tbl).each(function(i, r) {
if ($("div:eq(0)", r).text().toLowerCase().indexOf(term.toLowerCase()) < 0) {
$(r).hide();
}
});
}
$("#txtsearch").autocomplete({
source: ["ERP", "Finans Muhasebe", "Banka"],
select: function(e, ui) {
filterTable($("table"), ui.item.value);
},
minLength: 0
}).keyup(function() {
if ($(this).val() == "") {
$("ul li a").show();
}
}).click(function() {
$(this).autocomplete('search', "");
})
});
.wrap_atletas_interno img {
line-height: 0;
}
.wrap_atletas_interno li {
float: left;
margin-right: 11px;
border: 3px solid #d0d2d6;
line-height: 0;
position: relative;
width: 86px;
height: 86px;
}
.wrap_atletas_interno li .nome_86_atleta {
position: absolute;
width: 75px;
padding: 8px;
padding-right: 0px;
background: #d0d2d6;
color: #243769;
font-size: 13px;
font-style: italic;
z-index: 1;
bottom: 6px;
left: 0px;
}
.wrap_atletas_interno li.atleta_atual {
border: 3px solid #c91700;
}
.wrap_atletas_interno li.atleta_atual .nome_86_atleta {
background: #c91700;
color: #ffffff;
}
.wrap_atletas_interno li.ultimo {
margin-right: 0;
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<input id="txtsearch" type="text" placeholder="Search Here..." />
</div>
<ul class="menu-content openMenu">
<li class="menuItem">
<a href="javascript:void(0)">
<div class="iconBox color-ER">E</div><span class="title">ERP</span><span class="arrow"></span>
</a>
<ul class="sub-menu">
<li id="0"><a href="javascript:void(0)"><i class="fa fa-cube fa-lg"></i><span class="title">Finans Muhasebe</span><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="javascript:void(0)">Cari<span class="arrow"></span></a>
<ul class="sub-menu">
<li>
<a href="/index.cfm?fuseaction=ch.list_caris">
<div class="objectText">Cari İşlemler</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=ch.list_company_extre">
<div class="objectText">Cari Extre</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=ch.payment_track&money_info">
<div class="objectText">Borç Alacak Dökümü</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=ch.form_add_debit_claim_note">
<div class="objectText">Dekont Ekle</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=ch.form_add_cari_to_cari">
<div class="objectText">Cari Virman Ekle</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=ch.form_add_cari_rate_valuation">
<div class="objectText">Kur Değerleme İşlemleri | CARİ</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=ch.form_upd_account_open">
<div class="objectText">Dönem Açılışı</div><span class="objectAdd"></span>
</a>
</li>
</ul>
</li>
<li><a href="javascript:void(0)">Banka<span class="arrow"></span></a>
<ul class="sub-menu">
<li>
<a href="/index.cfm?fuseaction=bank.list_bank_account">
<div class="objectText">Banka Hesapları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_bank_actions">
<div class="objectText">Banka İşlemleri</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_virman">
<div class="objectText">Döviz Alış Satış Virman İşlemi</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_assign_order">
<div class="objectText">Banka Talimatları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_invest_money">
<div class="objectText">Para Yatırma</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_gelenh">
<div class="objectText">Gelen Havale</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_creditcard_revenue">
<div class="objectText">Kredi Kartı Tahsilatları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_credit_card_expense">
<div class="objectText">Kredi Kartıyla Ödemeler</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_get_money">
<div class="objectText">Para Çekme</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_gidenh">
<div class="objectText">Giden Havale</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_payment_credit_cards">
<div class="objectText">Kredi Kartı Hesaba Geçiş</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=finance.list_creditcard">
<div class="objectText">Kredi Kartları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_bank_rate_valuation">
<div class="objectText">Kur Değerleme İşlemleri | BANK</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_bank_autopayment_export">
<div class="objectText">Otomatik Ödeme İşlemleri</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_term_deposit">
<div class="objectText">Vadeli Mevduat Hesaba Yatır</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_bank_autopayment_import">
<div class="objectText">Otomatik Ödeme İşlemleri Dönüşleri</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.interest_revenue">
<div class="objectText">Vadeli Mevduat Getiri Listesi</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=finance.list_bank_branch">
<div class="objectText">Banka Şubeleri</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_bank_account_open">
<div class="objectText">Hesap Açılışı</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=finance.list_bank_types">
<div class="objectText">Bankalar</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=finance.list_bank_pos">
<div class="objectText">Pos Tanımları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_pos_operation">
<div class="objectText">Otomatik Sanal Pos Kuralları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=finance.list_credit_payment_types">
<div class="objectText">Kredi Kartı Ödeme/Tahsil Yöntemleri</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=settings.list_pos_relation">
<div class="objectText">Sanal Pos Tanımları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.wodiba_bank_actions">
<div class="objectText">WoDiBa Banka İşlemleri</div><span class="objectAdd"></span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
这是jsfiddle
更新:
并非所有子菜单元素都应该可见,除了class="objectAdd"
. 如果用户输入了“Cari”,则所有具有 objectAdd 类的相关“Cari”都必须可见。添加了示例图片。
解决方案
由于您不再使用 a table
,因此您必须考虑它如何影响 HTML 结构。这将改变你的功能和一些选择器。
考虑以下。
$(function() {
function filterGroup(el, term) {
$("ul > li", el).show();
$("ul > li", el).each(function(i, r) {
if ($("a > div", r).text().toLowerCase().indexOf(term.toLowerCase()) < 0) {
$(r).hide();
}
});
}
$("#txtsearch").autocomplete({
source: ["ERP", "Finans Muhasebe", "Banka"],
select: function(e, ui) {
filterGroup($(".sub-menu").parent(), ui.item.value);
},
minLength: 0
}).keyup(function() {
if ($(this).val() == "") {
$("li").show();
}
}).click(function() {
$(this).autocomplete('search', "");
})
});
.wrap_atletas_interno img {
line-height: 0;
}
.wrap_atletas_interno li {
float: left;
margin-right: 11px;
border: 3px solid #d0d2d6;
line-height: 0;
position: relative;
width: 86px;
height: 86px;
}
.wrap_atletas_interno li .nome_86_atleta {
position: absolute;
width: 75px;
padding: 8px;
padding-right: 0px;
background: #d0d2d6;
color: #243769;
font-size: 13px;
font-style: italic;
z-index: 1;
bottom: 6px;
left: 0px;
}
.wrap_atletas_interno li.atleta_atual {
border: 3px solid #c91700;
}
.wrap_atletas_interno li.atleta_atual .nome_86_atleta {
background: #c91700;
color: #ffffff;
}
.wrap_atletas_interno li.ultimo {
margin-right: 0;
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<input id="txtsearch" type="text" placeholder="Search Here..." />
</div>
<ul class="menu-content openMenu">
<li class="menuItem">
<a href="javascript:void(0)">
<div class="iconBox color-ER">E</div><span class="title">ERP</span><span class="arrow"></span>
</a>
<ul class="sub-menu">
<li id="0"><a href="javascript:void(0)"><i class="fa fa-cube fa-lg"></i><span class="title">Finans Muhasebe</span><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="javascript:void(0)">Cari<span class="arrow"></span></a>
<ul class="sub-menu">
<li>
<a href="/index.cfm?fuseaction=ch.list_caris">
<div class="objectText">Cari İşlemler</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=ch.list_company_extre">
<div class="objectText">Cari Extre</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=ch.payment_track&money_info">
<div class="objectText">Borç Alacak Dökümü</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=ch.form_add_debit_claim_note">
<div class="objectText">Dekont Ekle</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=ch.form_add_cari_to_cari">
<div class="objectText">Cari Virman Ekle</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=ch.form_add_cari_rate_valuation">
<div class="objectText">Kur Değerleme İşlemleri | CARİ</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=ch.form_upd_account_open">
<div class="objectText">Dönem Açılışı</div><span class="objectAdd"></span>
</a>
</li>
</ul>
</li>
<li><a href="javascript:void(0)">Banka<span class="arrow"></span></a>
<ul class="sub-menu">
<li>
<a href="/index.cfm?fuseaction=bank.list_bank_account">
<div class="objectText">Banka Hesapları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_bank_actions">
<div class="objectText">Banka İşlemleri</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_virman">
<div class="objectText">Döviz Alış Satış Virman İşlemi</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_assign_order">
<div class="objectText">Banka Talimatları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_invest_money">
<div class="objectText">Para Yatırma</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_gelenh">
<div class="objectText">Gelen Havale</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_creditcard_revenue">
<div class="objectText">Kredi Kartı Tahsilatları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_credit_card_expense">
<div class="objectText">Kredi Kartıyla Ödemeler</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_get_money">
<div class="objectText">Para Çekme</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_gidenh">
<div class="objectText">Giden Havale</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_payment_credit_cards">
<div class="objectText">Kredi Kartı Hesaba Geçiş</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=finance.list_creditcard">
<div class="objectText">Kredi Kartları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_bank_rate_valuation">
<div class="objectText">Kur Değerleme İşlemleri | BANK</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_bank_autopayment_export">
<div class="objectText">Otomatik Ödeme İşlemleri</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_term_deposit">
<div class="objectText">Vadeli Mevduat Hesaba Yatır</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_bank_autopayment_import">
<div class="objectText">Otomatik Ödeme İşlemleri Dönüşleri</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.interest_revenue">
<div class="objectText">Vadeli Mevduat Getiri Listesi</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=finance.list_bank_branch">
<div class="objectText">Banka Şubeleri</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.form_add_bank_account_open">
<div class="objectText">Hesap Açılışı</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=finance.list_bank_types">
<div class="objectText">Bankalar</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=finance.list_bank_pos">
<div class="objectText">Pos Tanımları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.list_pos_operation">
<div class="objectText">Otomatik Sanal Pos Kuralları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=finance.list_credit_payment_types">
<div class="objectText">Kredi Kartı Ödeme/Tahsil Yöntemleri</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=settings.list_pos_relation">
<div class="objectText">Sanal Pos Tanımları</div><span class="objectAdd"></span>
</a>
</li>
<li>
<a href="/index.cfm?fuseaction=bank.wodiba_bank_actions">
<div class="objectText">WoDiBa Banka İşlemleri</div><span class="objectAdd"></span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
推荐阅读
- bash - Docker 自动安装后无法启动
- python - pythonanywhere 上的媒体目录/文件出现问题
- blazor - 有没有办法让 WebAssembly 应用程序作为独立或自托管运行?
- java - 无法使用 Apache Camel 3.1.0 将 XML 转换为 JSON
- ruby-on-rails - SocketError:执行 docker-compose 文件时无法打开与 docker 服务的 TCP 连接
- python - Pytest - 获取使用的固定装置和创建的数据的可见性
- javascript - 将 JSON 文件传递到 php 服务器,然后将其中的数据保存到 Mysql DB
- sql - 如何摆脱动态 SQL (T-SQL)
- c - 确定数组[1...n] 是否为最大堆
- css - 为什么我的 CSS 网格行会相互重叠?