如何从外部 HTML 中获取特定值答案

【问题标题】：how to get specific value from outer HTML如何从外部 HTML 中获取特定值
【发布时间】：2014-03-13 13:51:54
【问题描述】：

我正在尝试从 outerHTML 中获取一些特定属性，这是我的一个函数中的一个字符串。

这里是 HTML：

<div data-role="touch" style="width:100%;overflow:hidden;" data-enable-swipe="true" data-swipe="relayControler.OnSwipeFavoris"> (relayControler.js, line 65)
<div class="divGaucheFavRelais" style="float:left;width:80%;">
<a style="border:none;-webkit-tap-highlight-color:none;width:95%;" data-role="button" data-click="relayControler.DetailsRelais" data-id-relais="39403" data-code-pays-relais="FR" class="km-widget km-button km-state-active">
  <span class="PointRelaisImage km-text" style="background-image: url(http://www.mondialrelay.com/img/dynamique/pr.aspx?id=FR039403); margin-top:8px;"></span>              
  <div class="PR-Name">
    CORDONNERIE GAMBETTA
  </div>
  <div class="PR-Adress"> 64 RUE LITTRE 
  </div>
  <div class="PR-Adress" style="margin-left:53px"> 59000 - LILLE - FR
  </div>
</a>
</div>
<div class="buttonUndoFavoris" style="width:100%;height:50px;background-color:grey;display:none;">
<div class="textRelaisSupprime" style="float:left">
  <p> Favori <sup>®</sup>supprime</p>
</div>
<div class="imageRelaisSupprime" style="float:right">
  <a class="button km-widget km-button" data-role="button" style="border:none;top:3px;"><span class="km-text"><img src="./img/undo.png" id="icoUndoFavoriSup" class="km-image"></span></a>
</div>
</div>
</div>

我们来了……

我感兴趣的属性在应答器中的 div“divGaucheFavRelais”中。它们是 data-id-relais 和 data-code-pays-relais，我在 JQuery 中尝试了一些东西，但我无法得到它们，打印时总是出现未定义的错误。

这是我尝试过的：

alert($(e.sender.element[0].outerHTML).data('id-relais'));

您看到的 HTML 代码是由模板生成的，这就是为什么我无法以另一种方式获取它们...

如果有人可以帮助...非常感谢:)

编辑：

我找到了如何获取我需要的信息，但我完全不确定这是不是正确的方法...... 对我来说似乎有点 hacky ...

e.sender.element[0].firstElementChild.childNodes[1].attributes.item(3).value;
e.sender.element[0].firstElementChild.childNodes[1].attributes.item(4).value;

如果有人可以告诉我这个解决方案是否只是您必须忘记的解决方案之一......

再次感谢那些你花时间帮助我的人；）

【问题讨论】：

outerHTML 将为您返回该元素的字符串。它将指向同一个元素。提供有关您需要做什么的更多信息。同时，我认为，你看起来像这样：$(this).data('id-relais').
html 代码是列表视图中每个元素的内容（由 kendo UI 提供），这意味着我将有多次相同的代码，但 data-id-relais 中的数据不同和数据代码支付。这就是为什么我需要传递函数采用的 e 参数的原因。也许还有另一种处理方法，但 outerHTML 是我找到属性值的唯一位置
试试这个：$(e.sender.element[0]).parent('a').data('id-relais'));
null 是返回值..
它将返回什么$(e.sender.element[0])。你能检查一下吗？

标签： jquery html outerhtml

【解决方案1】：

您是否尝试过使用traversing

如果我没理解的话，应该会有所帮助

$(e.sender).parents('div>a').data('id-relais'));

【讨论】：

parent() 是 jquery 方法，而不是 parents()。更正它。

【解决方案2】：

试试这个：

alert($('.divGaucheFavRelais a').data('id-relais'));

我希望像这样在 A 标签中添加一个 ID

<a href="#" id="myId" data-value="12345"></a>

通话后

alert($('#myId').data('value'));

【讨论】：

不能...正如我所说，这是一个列表视图，如果我按照您的方式进行操作，将会有多个具有相同 ID 的项目，如果我有，这种方式是正确的列表中只有一项
将循环值添加到 id。
我不明白你的意思

【解决方案3】：

这是我认为的好方法：

    var div = e.sender.element[0];
    var bouton = $(".boutonListeFavoris",div);
    var idRelais = bouton.attr("data-id-relais");
    var codePays = bouton.attr("data-code-Pays-relais");

【讨论】：

【解决方案4】：

外部HTML文本：

<input id ="UserControl" value ="New Custmer" defaultvalue="Cust415875" clientcontrolname = "CusterInfo">

从outerHTML中获取clientcontrolname（属性）值：

var strGrpAssoc = oGrpAssoc.outerHTML + "</input>";
    var xmlGrpAssoc = loadXMLString(strGrpAssoc.toLowerCase());
    var sClientControlName = xmlGrpAssoc.getElementsByTagName("input")[0].getAttribute("clientcontrolname"); 

    function loadXMLString(txt) {
        if (window.DOMParser) {
            parser = new DOMParser();
            xmlDoc = parser.parseFromString(txt, "text/xml");
        }
        else // code for IE
        {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.loadXML(txt);
        }
        return xmlDoc;
    }

【讨论】：