的jQuery - 选择输入最接近/最近DIV＆每个输入

Question

增加值在我的应用程序中，我使用$.get和yahoo APIs获取开图册/ OG：由用户从给URL标题&描述。

它的工作原理是片断的打击，或者您可以访问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:数据。

Answer 1

这是如何解决这个问题。首先将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'); 
     }); 

    }); 
});