如何让div在ul-li-a内，并使div内的文字相等。
问题描述 投票：0回答：1
我在搜索按钮里面有一个缓存列表，一旦我选择其中一个，就应该触发菜单，并选取正确的列表。但是我不知道如何比较一下。innerText 的 div 与从搜索区域中选择的一个。两个 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'，所有相关的'Cari'，只要有objectAdd类就必须可见。已经添加了一个示例图片。
1个回答
0
投票
投票
由于你不再使用 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>最新问题
- VirtualBox 下鼠标滚动不起作用
- 更改已上传到 Play 商店的 Android 应用程序的标签
- 如何在 MySQL 中对 NULL 值进行唯一约束
- Nuxt v.3.11 - 如何导入 `github/relative-time-element`？
- Android 如何检测在分屏模式下运行的应用程序
- 在 AWS 步骤函数中使用 json 输入进行 ECS 容器配置
- 如何使用ServiceAccount Token连接Kubernetes集群？
- 我的 powershell 脚本没有停止我正在打开的进程
- 如何在 Python 中打印井字游戏中的字符
- 以类为参数的 Locust 多态性
- esc/pos 打印机纸张用完
- 不跳过两个连续元素的最大和
- 如何使用pandas数据透视表聚合唯一计数
- PHP 函数输出仅在单击页面后更新
- mlflow 运行命令中单个参数的多个值
- 如何解决我的 Azure VM 成本问题？
- generateStaticParams() 在 NextJs/TypeScript 中不起作用
- 在 Outlook 中自动设置共享收件箱的类别
- Ctrl+鼠标左键单击事件捕获Qt
- 根据产品价格在 WooCommerce 产品页面上显示其他货币
© www.soinside.com 2019 - 2024. All rights reserved.