的jQuery - 选择输入最接近/最近DIV&每个输入
问题描述:
增加值在我的应用程序中,我使用$.get
和yahoo APIs
获取开图册/ OG:由用户从给URL标题&描述。的jQuery - 选择输入最接近/最近DIV&每个输入
它的工作原理是片断的打击,或者您可以访问jsfiddle snippet
$('#get-social-data-from-url').keyup(function(){
var query = 'select * from html where url="' + $('input').val() + '" and xpath="*"';
var url = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query);
$.get(url, function(data) {
var html = $(data).find('html');
$('#title').val(html.find("meta[property='og:title']").attr('content') || 'no title found');
$('#description').val(html.find("meta[property='og:description']").attr('content') || 'no description found');
});
});
input{
width:90%;
height:50px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="one">
<!-- Paste this link here:
http://www.lifedaily.com/firefighters-help-pregnant-mom-who-lost-everything-in-a-fire/
-->
<input type="text" id="get-social-data-from-url" placeholder="Paste your link here">
</div>
<div class="two">
<lable>Title</lable>
<input type="text" id="title" placeholder="title">
<label>Description</label>
<input type="text" id="description" placeholder="description">
</div>
</div>
此功能工作正常时,它只有一个form
。我的应用程序是在一个页面动态应用&我有同样的form
多次(多达用户想要添加)
所以我form
看起来像这样jsfiddle snippet &每个input##get-social-data-from-url
将有不同链接没有什么会工作/正常工作。
现在我能够使用data-
选择正确inputs
&工作正常,但由于某些原因,我不能得到og:
冠军 & 描述,我得到找不到标题。
这是我要做的事现在:
$(function() {
var fileFieldId;
var query;
var url;
$(".get-social-data-from-url").keyup(function() {
fileFieldId = $(this).attr('id');
query = 'select * from html where url="' + $('input').val() + '" and xpath="*"';
url = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query);
$.get(url, function(data) {
var html = $(data).find('html');
$("input.post-title-create[data-title-id='" + fileFieldId + "']").val(html.find("meta[property='og:title']").attr('content') || 'no title found');
$("textarea.post-description-create[data-description-id='" + fileFieldId + "']").val(html.find("meta[property='og:title']").attr('content') || 'no title found');
});
});
});
唯一的问题我已经是像以前,我不能得到正确的og:
数据。
答
这是如何解决这个问题。首先将data-
加到每个input
具有相同的值,但不同的名称为data
。
例如:
<input class="post-title-create" data-title-id="attributes_1" type="text" id="attributes_1493294690538_title">
& Javascript
代码:
$(function() {
var fileFieldId;
var fileFieldVal;
var fileFieldClass;
var query;
var apiUrl;
$(".get-social-data-from-url").keyup(function() {
fileFieldId = $(this).attr('id');
fileFieldClass = $(this).attr('class');
fileFieldVal = $(this).val();
query = 'select * from html where url="' + $(this).val() + '" and xpath="*"';
apiUrl = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query);
$("h4[data-preview-id='" + fileFieldId + "']").text('updated');
$("input.post-link-create[data-link-id='" + fileFieldId + "']").val(fileFieldVal);
$.get(apiUrl, function(data) {
var html = $(data).find('html');
$("input.post-title-create[data-title-id='" + fileFieldId + "']").val(html.find("meta[property='og:title']").attr('content') || 'no title found');
$("textarea.post-description-create[data-description-id='" + fileFieldId + "']").val(html.find("meta[property='og:description']").attr('content') || 'no title found');
$("input.post-remote-image-create[data-remoteimg-id='" + fileFieldId + "']").val(html.find("meta[property='og:image']").attr('content') || 'no title found');
});
});
});
动态创建的元件可以具有相同的类(通常是这样),但***不能***具有相同的IDS。如果因为使用某个插件而无法控制该插件,则该插件的设计/写入错误(严重)。为了轻松管理动态创建的元素,您始终可以使用索引前缀/后缀基本ID来创建不同的ID。 –
@KingKing谢谢你的回复。是的,这是正确的我有不同的'ID',但我不知道'ID'plugin适用于每个'输入'。但我仍然可以给他们一个固定的“ID”。总之,我在每个“输入”上都有固定的和不同的“ID”。任何帮助表示赞赏。 – Rubioli