小编zıə*_*əʇs的帖子

jQuery:包含搜索多个字符串的选择器

假设我有:

<li id="1">Mary</li>
<li id="2">John, Mary, Dave</li>
<li id="3">John, Dave, Mary</li>
<li id="4">John</li>
Run Code Online (Sandbox Code Playgroud)

如果我需要找到包含"John"和"Mary"的所有<li>元素,我将如何构建jQuery?

搜索单个字符串似乎很容易:

$('li:contains("John")').text()
Run Code Online (Sandbox Code Playgroud)

我正在寻找类似下面的伪代码:

$('li:contains("John")' && 'li:contains("Mary")').text()
Run Code Online (Sandbox Code Playgroud)

谢谢!

jquery contains css-selectors jquery-selectors

63
推荐指数
3
解决办法
5万
查看次数

以编程方式触发typeahead.js结果显示

我在输入字段上使用Twitter的typeahead.js(https://github.com/twitter/typeahead.js/),该输入字段是从查询字符串预填充的.加载页面后,我想以编程方式触发预先输出结果的显示,而无需用户在表单字段中输入任何内容.

开箱即用,只有当用户在输入字段中手动输入内容并且我在typeahead.js中找不到任何可以调用以触发结果显示的方法时,才会触发typeahead.js.

任何指针都将非常感激.

谢谢!

javascript typeahead.js

36
推荐指数
7
解决办法
4万
查看次数

使用CSS flexbox或网格布局的响应式图库

我正在开发一个Image-Gallery-Widget,用户可以在其中设置缩略图宽度,缩略图高度和边距(缩略图之间),小部件将在一个漂亮的网格中呈现所有图像-thumnails,其中每个图像具有相同的宽度和高度.

我想知道css-flexbox或css-grid是否可以实现这一点,而无需在代码中定义行和列,也不需要断点/媒体查询.

缩略图图像包含在锚点中,因此图库项目(或网格项目)看起来像这样:

<a href="#" class="gallery-item">
    <img src="myimage" width="300" height="200" />
</a>
Run Code Online (Sandbox Code Playgroud)

图库项目应该完全填充容器div,这意味着,行中的最后一个缩略图和容器div的右边缘之间不应该有间隙(除非我们没有足够的项目来填充行,即3个项目ft连续,但我们只有8个项目,那么第3行只有2个项目,右边有一个与一个项目一样宽的间隙).

图库项目永远不会宽于用户设置的缩略图宽度,因为我们不希望降低缩略图的质量.我们假设这个例子宽度为300px.图库项目之间的边距是固定的并由用户设置.如果没有足够的项目来填充行,只需左对齐它们,即如下:

在此输入图像描述

我不想在CSS中定义任何断点,也不想为行/列构造添加任何html.我希望浏览器只需放置尽可能多的画廊项目,以适应容器.如果右侧有间隙(即3个缩略图*300px宽度= 900px,但容器宽度为1000px),浏览器应缩小网格项目,以便再插入一个图库项目,从而消除差距.我需要能够围绕每个图库项目定义边距.

您可以在此gif中看到所需的响应行为(在更改浏览器宽度时):

期望的响应行为

你在gif中看到的是没有flexbox但是需要大量的CSS,我希望用flexbox来避免.我已经对flexbox进行了一些研究,但还没有完全理解它.

谢谢你的任何提示!

css flexbox css-grid

5
推荐指数
2
解决办法
1万
查看次数